此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

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

以下版本说明的视频版本

直观呈现效果指标

在记录网页加载后，开发者工具现在可以在 Timings 部分中标记 DOMContentLoaded 和 First Meaningful Paint 等性能指标。

“Timing”部分中的首次有效绘制时间

图 1. “Timing”部分中的首次有效绘制时间

突出显示文本节点

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

突出显示文本节点

图 2. 突出显示文本节点

复制 JS 路径

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

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

复制 JS 路径

图 3. 复制 JS 路径

DevTools 会将如下所示的表达式复制到剪贴板：

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

审核面板更新

Audits 面板现在正在运行 Lighthouse 3.2。版本 3.2 包含一项名为检测到的 JavaScript 库的新审核。这项审核列出了 Lighthouse 在该页面上检测到了哪些 JS 库。您可以在报告中的最佳实践 > 通过的审核下找到这项审核。

检测到的 JavaScript 库

图 4. 检测到的 JavaScript 库

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

在命令菜单中输入“灯塔”

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

请通过 crbug.com 提交建议或反馈。
在开发者工具中使用更多选项 > 帮助 > 报告开发者工具问题来报告开发者工具问题。
请发送电子邮件至 @ChromeDevTools。
请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。