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

本文翻译自：Some Cross-Browser DevTools Features You Might Not Know

我在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树，这可能会很烦人。幸运的是，您可以通过转到Settings (F1) → Preferences → Global → Search as you type → Disable.

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

从控制台访问节点

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

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

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

这里有另一种直接从控制台访问DOM节点的方法：作为临时变量。此选项可通过右键单击节点并选择一个选项来使用。该选项在每个浏览器的DevTools中都有不同的标签：

• Chromium：右键单击→ “存储为全局变量”
• Firefox：右键单击→ “在控制台中使用”
• Safari：右键单击→ “日志元素”

使用徽章将元素可视化

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

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

Firefox的DevTools中当前支持的徽章列在Firefox源文档中。例如，滚动徽章表示可滚动元素。单击徽章会高亮显示导致溢出的元素，旁边会有一个溢出徽章。

在Chromium浏览器中，您可以右键单击任何节点并选择“徽章设置…”以打开一个列出所有可用徽章的容器。例如，具有滚动捕捉类型的元素旁边会有一个滚动捕捉徽章，单击后会切换该元素上的滚动捕捉覆盖。

截屏

我们已经能够从一些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徽章，单击后会跳转到位于标记后面的top layer容器。

顶层容器中元素的顺序遵循堆叠顺序，这意味着最后一个元素在顶部。单击显示徽章以跳回节点。

Firefox提示：跳转到ID

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

总结

很多事情，对吧？Chromium、Firefox和Safari都支持一些非常有用的DevTools功能，这真是太棒了。你喜欢这三种功能，还有其他鲜为人知的功能吗？

我有一些资源可以随时掌握最新动态。我想在这里分享一下：

• DevTools提示（Patrick Brosset）：精心策划的跨浏览器DevTools提示和技巧集。
• Dev提示（Umar Hansa）：DevTools提示发送到您的收件箱！
• 我可以开发工具吗？：DevTools的容器。