前端开发人员在浏览器的 DevTools 中花费了大量时间。他们在编写代码的代码编辑器中花费的时间可能与此相当。然而，大多数开发人员仅仅是在 DevTools 中探索了一小部分功能。我一直在收集各大浏览器的 DevTools 技巧，以下是一些跨不同浏览器的实用技巧，将帮助您充分发挥 DevTools 的潜力。

为了简洁起见，所有基于 Chromium 的浏览器，如 Chrome、Edge、Opera 等，都被称为 Chromium，因为这些浏览器的 DevTools 体验和功能非常相似。

1. 鼠标悬停时检查弹出窗口

如果您曾尝试过检查仅在悬停时出现的弹出元素，比如工具提示、下拉菜单等，那么您就会知道检查弹出元素是多么困难。检查弹出元素的主要问题是，当您在 DevTools 中的任何地方单击时，页面会失去焦点，导致弹出窗口消失。为了解决这个问题，Chromium 浏览器有一个模拟焦点页面选项，在使用 DevTools 时保持页面聚焦。

在 DevTools 中访问此选项有两种方式：

• 1. 在 Elements 面板中选择激活了悬停时显示弹出窗口的元素。打开 Styles 面板，点击:hov按钮激活悬停状态。启用模拟焦点页面选项，以便在与 DevTools 交互时保持主页面聚焦。
• 2. 打开命令菜单，运行Show Rendering以打开 DevTools 底部的 Rendering 抽屉。滚动查找模拟焦点页面选项并启用它。

2. 使用 logpoints

DevTools 中的调试工具已经进步了很多。但如果您像我一样，仍然喜欢使用console.log来调试代码，那么有一个更好的方法可以在不用console.log()语句的情况下在控制台中获得日志输出。在调试生产代码时也很有用。

对于 Chromium 浏览器，打开Sources面板中的脚本，右键单击行号，然后选择“Add logpoint…”。输入消息，包括您想要在控制台中记录的变量。

在 Firefox 中，类似的选项在Debugger面板中，右键单击行号，然后选择“Add log”。

3. 模拟可折叠设备

可折叠设备现在非常流行。然而，您的网站在可折叠屏幕上可能看起来与单屏设备不同，因为两个屏幕之间有缝隙。这是一个很好的机会，通过围绕屏幕折叠部分的负空间巧妙地设计网站，为双屏幕的约束提供改进的用户体验。幸运的是，一些浏览器允许我们模拟可折叠设备或双屏幕，这可以帮助我们设计我们的网站，围绕屏幕的中缘（可折叠的部分）。

您可以使用 CSS 媒体查询来定位可折叠的视口。在 Chromium 浏览器中，进入Device Emulation模式，选择可折叠设备，这将在工具栏中添加额外的按钮。从工具栏使用按钮切换纵向和横向，或单屏幕和双屏幕模式，以查看网站在不同模式下的外观。

4. 自动完成样式

Chromium 浏览器允许您仅通过输入值即可输入声明，并且 DevTools 将自动建议最接近

的匹配属性值对。例如，我们可以输入bold，DevTools 将自动建议font-weight: bold作为首选项选择。

在 Safari 中，如果您的声明中有拼写错误，Web 检查器将尝试模糊匹配并建议最接近的匹配属性：值对。

5. 颜色格式

所有主要浏览器 DevTools 都允许您通过按住Shift键并单击颜色预览框来切换作者颜色格式，以循环浏览各种颜色格式，如hex、rgb、hsl、hwb。或者，您也可以使用 color picker 使用上下箭头键更改颜色格式。

在 Chromium 和 Safari 浏览器中，您可以使用颜色选择器从浏览器窗口外选择颜色。Safari 还允许您将颜色格式更改为display-p3。下面演示中的白线显示了 sRGB 的边缘。右上角的所有内容都是 Display-P3 颜色，而 sRGB 中没有。为了回退，右键单击颜色框，然后选择“Clamp to sRGB”以将其转换为 sRGB 空间中最接近的可用颜色。

6. 捕获高分辨率截图

有时，您可能会使用浏览器扩展、第三方服务或Node.js 库来获取网站的高分辨率截图，如果您没有高分辨率设备的话。使用 DevTools，您可以在浏览器内部轻松地获取整个页面或视口的高分辨率截图，而无需额外的工具。

在 Chromium 浏览器中：

1. 在 DevTools 中，单击切换设备工具栏图标（Cmd+Shift+M或Ctrl+Shift+M）进入响应式设计模式。
2. 在设备工具栏中，单击更多选项（⋮）> 添加设备像素比。在视口顶部的操作栏中，从新的 DPR 下拉菜单中选择 DPR 值。默认值为 2，但您可以将其增加到 3！
3. 单击更多选项 > 选择捕获截图以捕获视口或捕获完整大小截图以捕获整个页面。

在 Firefox 中，

1. 打开 Console 面板，运行命令:screenshot --dpr 3以使用设备像素比为 3 对页面进行高清截图。
2. 要捕获完整页面截图，只需在末尾添加--fullpage，并添加--screenshot .header以捕获可以通过选择器标识的节点的截图。

7. 检查事件流

如果您的 Web 应用程序从服务器接收一系列事件，使用 Server-Sent Events 分派，那么您需要能够在 DevTools 中检查传入的流。SSE 的行为与传统的请求-响应范式有所不同，因此，在 Network 面板中您只会看到一个请求。

在 Chromium 浏览器中，您仍然可以通过打开请求并导航到EventStream选项卡来检查传入的流。此外，EventStream 选项卡还捕

获由服务器通过 XHR 和 Fetch 发送的事件。与网络面板类似，您还可以使用正则表达式过滤流或清除表中的条目。

8. 查看和复制样式更改

DevTools 允许您轻松调整页面上的样式并实时查看输出。但是识别所有已修改的样式并将它们复制回编辑器是很繁琐的。如果您发现自己经常在编辑器和 DevTools 之间不断切换以复制样式更改，有一种更简单的方法可以查看已更改的内容，并将更改复制到编辑器中。

在 Firefox 中：

1. 在Rules面板中，对 CSS 声明应用更改，然后打开Changes选项卡以查看所有已更改样式的差异。单击“Copy All Changes”按钮即可复制修改后的样式，先前的声明会自动注释掉。

在 Safari 中：

1. 在Styles面板中，对 CSS 声明应用更改，然后单击Changes面板以查看差异。

9. 实时表达式

如果您经常在Console中输入相同的 JavaScript 表达式，您可以使用Live Expressions简化工作流程。Live Expressions 就像调试器中的 Watch 功能一样，在您与网页交互时实时评估表达式。

在 Chromium 浏览器中，单击 Console 中的眼睛图标创建 Live Expression。Live Expression 文本框将出现。在文本框中键入您的表达式，然后按Enter。

Live Expressions 固定在控制台顶部。您可以添加多个实时表达式。如果按Shift+Enter，甚至可以使用多行表达式。

10. 调试水平滚动条

不需要的水平滚动条是前端开发中最令人讨厌的问题之一，尤其是识别导致溢出的元素。Firefox 和 Polypane 提供了一些独特的方法来识别页面上的此类元素。

在 Firefox 的Inspector面板中，具有滚动条的元素以scroll标记标识。单击标记可突出显示导致容器具有滚动条的元素，这些元素以overflow标记显示。

Polypane 是基于 Chromium 的浏览器，它会自动检测带有水平滚动条的容器，标记为溢出图标（**↔**）。单击图标将激活布局调试工具，该工具将以红色突出显示导致溢出的元素。

要获取浏览器 DevTools 的更多此类见解和技巧，请留意本空间以及 Web 社区策划的以下资源：

• DevTools Tips（Patrick Brosset）：一个策划的有用跨浏览器 DevTools 技巧集合。
• Dev Tips（

Umar Hansa）：Chrome DevTools 的视频和文章提示。

现在您有了所有这些技巧，开始使用 DevTools 提高您的前端开发工作流程吧！