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

我在 DevTools 上花了很多时间，我相信你也是。 有时我什至在它们之间跳来跳去，尤其是在调试跨浏览器问题时。 DevTools 很像浏览器本身——并非一个浏览器的 DevTools 中的所有功能都与另一个浏览器的 DevTools 相同或受支持。

但是有相当多的 DevTools 功能是可以互操作的，甚至还有一些鲜为人知的功能，我将与您分享。

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

在 DOM 树中搜索节点

有时 DOM 树充满了嵌套在其他节点中的节点，等等。 这使得找到您正在寻找的确切对象变得非常困难，但您可以使用以下命令快速搜索 DOM 树 Cmd + F （macOS）或 Ctrl + F （视窗）。

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

在 Chromium 浏览器中，焦点会在您键入时自动跳转到与搜索条件匹配的节点，如果您正在处理较长的搜索查询或大型 DOM 树，这可能会很烦人。 幸运的是，您可以通过前往 个人设置 (F1）→ 优先 → 全球 → 键入时搜索 → 关闭.

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

从控制台访问节点

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

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

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

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

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

使用徽章可视化元素

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

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

目前支持的徽章 火狐的 DevTools 在 Firefox 中列出 源文档。 例如，a scroll badge 指示可滚动元素。 单击徽章会突出显示导致溢出的元素 overflow 旁边的徽章。

In 铬 浏览器，您可以右键单击任何节点并选择 “徽章设置……” 打开一个列出所有可用徽章的容器。 例如，元素与 scroll-snap-type 会有一个 scroll-snap 它旁边的徽章，点击它，将切换 scroll-snap 覆盖在该元素上。

截屏

一段时间以来，我们已经能够从一些 DevTools 中截取屏幕截图，但现在所有工具都可以使用它，并且包括截取整页截图的新方法。

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

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

还有另一种选择！ 您可以截取页面的“响应式”屏幕截图，这样您就可以在特定的视口宽度下捕获页面。 如您所料，每个浏览器都有不同的方式到达那里。

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

Chrome 提示：检查顶层

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

中元素的顺序 top-layer 容器遵循堆叠顺序，这意味着最后一个在顶部。 点击 reveal 徽章跳回节点。

Firefox 提示：跳转到 ID

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

结束了

很多事情，对吧？ 很棒的是，Chromium、Firefox 和 Safari 都支持一些非常有用的 DevTools 功能。 您是否喜欢这三者都支持的其他鲜为人知的功能？

我身边有一些资源，可以随时了解最新消息。 我想我会在这里分享它们：

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/