很多人会在 DevTools 上花了很多时间，我相信你也一样。有时我甚至在它们之间来回切换，特别是当我调试跨浏览器问题时。DevTools 很像浏览器本身 - 并非一个浏览器的 DevTools 中的所有功能都与另一种浏览器的 DevTools 相同或受支持。
但有相当多的 DevTools 功能是可互操作的，甚至是一些鲜为人知的功能。
为了简洁起见，我在本文中使用"Chromium"来指代所有基于 Chromium 的浏览器，例如 Chrome、Edge 和 Opera。其中的许多 DevTools 提供了彼此完全相同的特性和功能，所有以下提到的，都是简称哈。
搜索 DOM 树中的节点
有时，DOM 树充满了嵌套在其他节点中的节点，等等。Cmd这使得找到您要查找的确切内容变得非常困难，但您可以使用+ F(macOS) 或Ctrl+ (Windows)快速搜索 DOM 树F。
此外，您还可以使用有效的 CSS 选择器（例如 ）.red或使用 XPath（例如 ）进行搜索//div/h1。
在 Chrome DevTools 中搜索文本（左）、在 Firefox DevTools 中搜索选择器（中）以及在 Safari DevTools 中搜索 XPath（右）
在 Chromium 浏览器中，焦点会在您键入时自动跳转到与搜索条件匹配的节点，如果您正在处理较长的搜索查询或较大的 DOM 树，这可能会很烦人。幸运的是，您可以通过转到设置 ( F1) →首选项 →全局 →键入时搜索 →禁用来禁用此行为。
在 DOM 树中找到节点后，可以通过右键单击节点并选择"滚动到视图"来滚动页面以将节点带入视口中。
从控制台访问节点
DevTools 提供了许多不同的方法来直接从控制台访问 DOM 节点。
例如，您可以使用$0来访问 DOM 树中当前选定的节点。Chromium 浏览器更进一步，允许您使用 、$1、$2、$3等访问按历史选择的时间顺序逆序选择的节点。
Chromium 浏览器允许您做的另一件事是将节点路径复制为 JavaScript 表达式，方法是document.querySelector右键单击节点，然后选择Copy → Copy JS path，然后可用于在控制台中访问该节点。
这是直接从控制台访问 DOM 节点的另一种方法：作为临时变量。右键单击节点并选择一个选项即可使用此选项。该选项在每个浏览器的开发工具中都有不同的标记：
- Chromium：右键单击→"存储为全局变量"
- Firefox：右键单击→"在控制台中使用"
- Safari：右键单击→"日志元素"
在控制台中将节点作为临时变量访问，如 Chrome（左）、Firefox（中）和 Safari（右）中所示
使用徽章可视化元素
DevTools 可以通过在节点旁边显示徽章来帮助可视化与某些属性匹配的元素。徽章是可点击的，不同的浏览器提供各种不同的徽章。
在Safari 中，元素面板工具栏中有一个徽章按钮，可用于切换特定徽章的可见性。例如，如果节点应用了display: grid或display: inline-gridCSS 声明，则grid其旁边会显示一个徽章。单击徽章将在页面上突出显示网格区域、轨道大小、行号等。
Safari DevTools 中带有徽章的网格覆盖
Firefox源文档中列出了 Firefox 开发工具当前 支持的徽章。例如，徽章表示可滚动元素。单击徽章会突出显示导致溢出的元素，并在其旁边显示一个徽章。scroll``overflow
在Chromium 浏览器中，您可以右键单击任何节点并选择 "徽章设置..." 以打开一个列出所有可用徽章的容器。例如，带有 的元素旁边scroll-snap-type会有一个徽章，单击该徽章将切换该元素上的叠加层。scroll-snap``scroll-snap
截图
我们已经能够从一些开发工具中截取屏幕截图一段时间了，但现在所有这些工具都可以使用它，并且包括截取全页屏幕截图的新方法。
该过程首先右键单击要捕获的 DOM 节点。然后选择捕获节点的选项，该节点的标签根据您使用的开发工具而有所不同。
Chrome（左）、Safari（中）和 Firefox（右）
在节点上重复相同的步骤html即可截取全页屏幕截图。不过，当您这样做时，值得注意的是 Safari 保留了元素背景颜色的透明度 - Chromium 和 Firefox 会将其捕获为白色背景。
比较 Safari（左）和 Chromium（右）中的屏幕截图
还有另一种选择！您可以拍摄页面的"响应式"屏幕截图，这允许您以特定的视口宽度捕获页面。正如您所料，每个浏览器都有不同的方法来实现这一目标。
- Chromium ：
Cmd++ (macOS) 或Shift+ + ( Windows)。或者单击"检查"图标旁边的"设备"图标。M``Ctrl``Shift``M - Firefox：工具→浏览器工具→"响应式设计模式"
- Safari：开发→"进入响应式设计模式"
在 Safari（左）、Firefox（右）和 Chromium（下）中启动响应式设计模式
Chrome 提示：检查顶层
Chrome 允许您可视化和检查顶层元素，例如对话框、警报或模式。当一个元素被添加到 时#top-layer，它旁边会出现一个top-layer徽章，单击该徽章后，您会跳转到位于该标签后面的顶层容器</html>。
容器中元素的顺序top-layer遵循堆叠顺序，即最后一个位于顶部。单击reveal徽章可跳回该节点。