您可能不知道的一些跨浏览器 DevTools 功能

我在 DevTools 中花费了大量时间，我相信您也是如此。有时我甚至会在它们之间切换，尤其是在调试跨浏览器问题时。DevTools 很像浏览器本身——并非所有浏览器 DevTools 中的功能都相同或在其他浏览器的 DevTools 中受支持。

但实际上，有很多 DevTools 功能是可互操作的，甚至一些鲜为人知的功能，我将与您分享。

为了简洁起见，我在本文中使用“Chromium”来指代所有基于 Chromium 的浏览器，例如 Chrome、Edge 和 Opera。它们中的许多 DevTools 提供了与彼此完全相同的特性和功能，因此这只是我一次性引用所有这些的简写。

在 DOM 树中搜索节点

有时 DOM 树充满了嵌套在节点中的节点，这些节点又嵌套在其他节点中，依此类推。这使得找到您要找的特定节点非常困难，但您可以使用 Cmd + F（macOS）或 Ctrl + F（Windows）快速搜索 DOM 树。

此外，您还可以使用有效的 CSS 选择器（如 .red）或 XPath（如 //div/h1）进行搜索。

在 Chromium 浏览器中，焦点会在您键入时自动跳转到与搜索条件匹配的节点，如果您使用较长的搜索查询或大型 DOM 树，这可能会很烦人。幸运的是，您可以通过转到 **设置**（F1）→ **首选项**→ **全局**→ **键入时搜索**→ **禁用** 来禁用此行为。

在 DOM 树中找到节点后，您可以通过右键单击节点并选择“滚动到视图”来滚动页面，将节点带入视窗。

从控制台访问节点

DevTools 提供了许多不同的方法来直接从控制台访问 DOM 节点。

例如，您可以使用 $0 访问 DOM 树中当前选定的节点。Chromium 浏览器更进一步，允许您使用 $1、$2、$3 等访问以历史选择顺序反向选择的节点。

Chromium 浏览器允许您做的另一件事是将节点路径复制为 document.querySelector 形式的 JavaScript 表达式，方法是右键单击节点，然后选择 **复制** → **复制 JS 路径**，然后可以在控制台中使用该路径访问节点。

以下是如何直接从控制台访问 DOM 节点的另一种方法：作为临时变量。此选项可通过右键单击节点并选择一个选项来获得。该选项在每个浏览器 DevTools 中的标签不同

• **Chromium**: 右键单击 → “存储为全局变量”
• **Firefox**: 右键单击 → “在控制台中使用”
• **Safari**: 右键单击 → “记录元素”

使用徽章可视化元素

DevTools 可以通过在节点旁边显示徽章来帮助可视化匹配某些属性的元素。徽章是可点击的，不同的浏览器提供各种不同的徽章。

在 **Safari** 中，元素面板工具栏中有一个徽章按钮，可用于切换特定徽章的可见性。例如，如果某个节点应用了 display: grid 或 display: inline-grid CSS 声明，则会在其旁边显示 grid 徽章。单击徽章将突出显示网格区域、跟踪大小、行号等，在页面上。

目前 **Firefox** 的 DevTools 中支持的徽章在 Firefox 源文档中列出。例如，scroll 徽章表示可滚动元素。单击徽章将突出显示导致溢出的元素，并在其旁边显示一个 overflow 徽章。

在 **Chromium** 浏览器中，您可以右键单击任何节点并选择 **“徽章设置...”** 来打开一个包含所有可用徽章的容器。例如，具有 scroll-snap-type 的元素将在其旁边显示 scroll-snap 徽章，单击该徽章将切换该元素上的 scroll-snap 覆盖。

截取屏幕截图

我们已经能够从一些 DevTools 中截取屏幕截图一段时间了，但现在它在所有 DevTools 中都可用，并且包含了截取全页面截图的新方法。

该过程从右键单击要捕获的 DOM 节点开始。然后选择捕获节点的选项，该选项的标签会根据您使用的 DevTools 不同而不同。

在 html 节点上重复相同的步骤以截取全页面屏幕截图。但是，值得注意的是，Safari 会保留元素背景颜色的透明度——Chromium 和 Firefox 会将其捕获为白色背景。

还有一个选项！您可以截取页面的“响应式”屏幕截图，这允许您以特定视窗宽度捕获页面。正如您可能预期的那样，每个浏览器都有不同的方法来实现这一点。

• **Chromium**: Cmd + Shift + M（macOS）或 Ctrl + Shift + M（Windows）。或者单击“检查”图标旁边的“设备”图标。
• **Firefox**: 工具 → 浏览器工具 → “响应式设计模式”
• **Safari**: 开发 → “进入响应式设计模式”

Chrome 小技巧：检查顶层

Chrome 允许您可视化和检查顶层元素，例如对话框、警报或模态框。当元素被添加到 #top-layer 时，它会在其旁边获得一个 top-layer 徽章，单击该徽章会将您跳转到位于 </html> 标签之后的顶层容器。

top-layer 容器中元素的顺序遵循堆叠顺序，这意味着最后一个元素位于最上面。单击 reveal 徽章可跳转回该节点。

Firefox 小技巧：跳转到 ID

Firefox 将引用 ID 属性的元素链接到同一 DOM 中的目标元素，并用下划线突出显示它。使用 CMD + Click（macOS）或 CTRL + Click（Windows））跳转到具有标识符的目标元素。

总结

不少吧？很棒的是，一些非常有用的 DevTools 功能在 Chromium、Firefox 和 Safari 中都得到了支持。您是否喜欢所有三个浏览器都支持的其他鲜为人知的功能？

我经常使用一些资源来了解最新的情况。我想在这里与大家分享。

• DevTools Tips (Patrick Brosset)：精选的跨浏览器 DevTools 提示和技巧集合。
• Dev Tips (Umar Hansa)：发送到您的收件箱的 DevTools 提示！
• Can I DevTools？：DevTools 的 Caniuse。