DevTools 技巧合集三

将 CSS 样式应用到控制台消息

可以使用 CSS 在 DevTools中对控制台输出进行样式化。

console.log('%c Hello World', 'color: orange; font-size: 2em;');

找出所有没有替代文本的图片

使用 HTML，您可以使用 alt属性为图像添加替代文本。它可用于为图像添加文本描述，这对于一些人可能无法看到图像的无障碍访问非常有用。通过 alt，屏幕阅读器可以向用户宣读替代文本。

使用 DevTools，您可以快速检查页面上哪些图像没有 alt文本，方法如下：

在控制台面板中执行以下命令：console.table($$('img').filter(i => !i.alt), ['src'])就这样！您将获得没有替代文本的图像 URL 列表。

上述 console.table 命令的输出显示在Firefox DevTools控制台中。

以下是这个命令的功能：

• $$() 查找所有与给定 CSS 选择器匹配的元素（在此了解更多）。这里用于查找所有图像。
• filter()用于仅保留没有 alt 属性的图像。
• 最后，console.table()获取 filter返回的数组，并基于它在控制台中输出一个漂亮的表格。请注意这里使用的第二个（可选）参数，它用于限制每个图像的 src 属性的列数。

跨页面导航和重新加载持久化控制台消息

默认情况下，控制台中显示的消息在刷新页面（或导航到新页面）时会被删除。如果你想在 DevTools 打开时保留这些消息，请按照以下步骤操作：

• 在 Firefox 中：
  在控制台面板中，点击齿轮图标（右上角），然后选择"Persist Logs"
• 在 Edge 或 Chrome 中：
  在控制台面板中，点击齿轮图标（右上角），然后勾选"Preserve Log"框
• 在 Safari 中：
  在控制台面板中，在顶部工具栏中勾选 "Preserve Log"框