开发者工具的新变化 (Chrome 72)

Kayce Basques

Chrome 72 中 Chrome 开发者工具的新功能和重大变化包括：

• 在“性能”面板中直观呈现性能指标。
• 突出显示 DOM 树中的文本节点。
• 从 DOM 树中复制 DOM 节点的 JS 路径。
• “审核”面板更新，包括一项用于检测 JS 库的新审核，以及用于从命令菜单访问“审核”面板的新关键字。

这些版本说明的视频版本

直观呈现效果指标

在记录网页加载后，开发者工具现在会在时间部分标记 DOMContentLoaded 和首次有效渲染等性能指标。

图 1. “Timing”部分中的“First Meaningful Paint”

突出显示文本节点

现在，当您将鼠标悬停在 DOM 树中的文本节点上时，开发者工具会在视口中突出显示该文本节点。

图 2. 突出显示文本节点

复制 JS 路径

假设您正在编写一项自动化测试，其中涉及点击某个节点（可能使用 Puppeteer 的 page.click() 函数），并且您希望快速获取对该 DOM 节点的引用。通常的工作流程是前往“元素”面板，右键点击 DOM 树中的节点，依次选择复制 > 复制选择器，然后将该 CSS 选择器传递给 document.querySelector()。但如果节点位于 Shadow DOM 中，此方法将不起作用，因为选择器会生成来自影子树内的路径。

如需快速获取对 DOM 节点的引用，请右键点击该 DOM 节点，然后依次选择复制 > 复制 JS 路径。DevTools 会将指向该节点的 document.querySelector() 表达式复制到您的剪贴板中。如上所述，在处理 Shadow DOM 时，此方法特别有用，但您也可以将其用于任何 DOM 节点。

图 3. 复制 JS 路径

开发者工具会将类似以下内容的表达式复制到剪贴板：

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

“审核”面板更新

“审核”面板现在运行的是 Lighthouse 3.2。版本 3.2 新增了一项名为“检测到的 JavaScript 库”的审核。此审核会列出 Lighthouse 在网页上检测到的 JavaScript 库。您可以在报告中的最佳实践 > 通过的审核下找到此审核。

图 4. 检测到的 JavaScript 库

此外，您现在可以通过在命令菜单中输入 Lighthouse 或 PWA 来访问“审核”面板。

图 5. 在命令菜单中输入 lighthouse

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试前沿的 Web 平台 API，并帮助您在用户之前发现网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容的列表。