一些你可能不知道的跨浏览器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中都有不同的标签：

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

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

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

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

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

该过程首先右键单击要捕获的DOM节点。然后选择捕获节点的选项，根据您使用的DevTools，节点会有不同的标记。

在html节点上重复相同的步骤以获取完整页面的屏幕截图。不过，当你这样做时，值得注意的是Safari保留了元素背景色的透明度——Chromium和Firefox会将其捕捉为白色背景。

还有另一种选择！您可以拍摄页面的“响应式”屏幕截图，这允许您以特定的视口宽度捕获页面。正如你所料，每个浏览器都有不同的方法来实现这一目标。

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

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

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

原文始发于微信公众号（胖蔡话前端）：一些你可能不知道的跨浏览器DevTools功能

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/222947.html