此页面由 Cloud Translation API 翻译。

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

Kayce Basques

Chrome 72 中 Chrome 开发者工具即将提供的新功能和重大变更包括：

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

以下版本说明的视频版本

直观呈现效果指标

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

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

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

突出显示文本节点

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

突出显示文本节点

图 2. 突出显示文本节点

复制 JS 路径

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

若要快速获取对 DOM 节点的引用，请右键点击该 DOM 节点，然后依次选择复制 > 复制 JS 路径。开发者工具会将一个指向该节点的 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，从命令菜单访问“审核”面板。

在命令菜单中输入“lighthouse”

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。