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

Kayce Basques

Chrome 72 中的 Chrome DevTools 的新功能和重大更改包括：

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

此版本说明的视频版

直观呈现性能指标

在记录网页加载后，开发者工具现在可以在 Timings 部分中标记 DOMContentLoaded 和 首次有效绘制等性能指标。

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

突出显示文本节点

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

图 2. 突出显示文本节点

复制 JS 路径

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

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

图 3. 复制 JS 路径

DevTools 会将类似以下内容的表达式复制到剪贴板：

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

“审核”面板更新

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

图 4. 已检测到的 JavaScript 库

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

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

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并帮助您在用户之前发现网站上的问题！

与 Chrome 开发者工具团队联系

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

• 请访问 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中使用 more_vert 更多选项 > 帮助 > 报告开发者工具问题来报告开发者工具问题。
• 向 @ChromeDevTools 发送推文。
• 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。