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

开发者工具是前端开发者的日常利器，本文将分享一些跨浏览器开发者工具中鲜为人知的实用特性，帮助您更高效地进行调试。

为简便起见，文中将使用“Chromium”指代所有基于Chromium的浏览器，如Chrome、Edge和Opera。它们的开发者工具在功能上高度一致。

DOM树节点搜索

面对层层嵌套的DOM节点，查找目标节点可能费时费力。使用Cmd F (macOS) 或 Ctrl F (Windows) 可快速搜索DOM树。

支持CSS选择器（例如<code>.red）和XPath表达式（例如<code>//div/h1）搜索。

在Chromium浏览器中，搜索时会自动跳转到匹配的节点，这在处理长查询或大型DOM树时可能令人困扰。您可以通过前往设置 (F1) → 偏好设置 → 全局 → 搜索时输入 → 禁用 来关闭此功能。

找到节点后，右键点击节点，选择“滚动到视图”即可将其滚动到可视区域。

从控制台访问节点

开发者工具提供多种方法从控制台直接访问DOM节点：

例如，<code><code> 可访问当前选择的DOM节点。Chromium浏览器更进一步，允许使用<code>、<code>、

等依次访问历史选择中的节点。

右键点击节点，选择复制 → 复制JS路径<code>document.querySelector，即可复制节点路径作为JavaScript表达式（

形式），方便在控制台中访问。

另一种方法是将节点存储为临时变量。右键点击节点，选择相应选项：

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

使用标记可视化元素

开发者工具可以通过在节点旁边显示标记来帮助可视化具有特定属性的元素。标记是可点击的，不同浏览器提供的标记种类也不同。

在Safari<code>display: grid中，元素面板工具栏中有一个标记按钮，用于切换特定标记的可见性。例如，如果节点应用了<code>display: inline-grid或

CSS声明，则会在其旁边显示网格标记。点击标记将突出显示页面上的网格区域、轨道大小、行号等。

Firefox

开发者工具当前支持的标记列在Firefox源文档中。例如，滚动标记指示可滚动元素。点击标记会突出显示导致溢出的元素，并在其旁边显示溢出标记。

在Chromium浏览器中，您可以右键点击任何节点，然后选择“标记设置…”，打开一个包含所有可用标记的容器。例如，具有<code>scroll-snap-type的元素在其旁边会有一个滚动捕捉标记，点击该标记将切换该元素上的滚动捕捉叠加层。

截图

现在所有主流浏览器都支持从开发者工具中截图，并且提供了新的全页面截图方式。

右键点击要捕获的DOM节点，选择捕获节点的选项（不同浏览器标签不同）。

对html节点重复此操作即可进行全页面截图。需要注意的是，Safari会保留元素背景色的透明度，而Chromium和Firefox会将其捕获为白色背景。

还可以进行“响应式”截图，以特定视口宽度捕获页面。不同浏览器的操作方法如下：

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

Chrome技巧：检查顶层

Chrome允许您可视化和检查顶层元素，例如对话框、警报或模态框。当元素添加到<code>#top-layer时，会在其旁边显示一个顶层标记，点击该标记会跳转到位于<code>

以上是一些跨浏览器DevTools您可能不知道的功能的详细内容。更多信息请关注PHP中文网其他相关文章！