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

Kayce Basques

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

以下版本说明的视频版本

直观呈现效果指标

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

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

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

突出显示文本节点

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

突出显示文本节点

图 2. 突出显示文本节点

复制 JS 路径

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

要快速获取对 DOM 节点的引用，请右键点击该 DOM 节点，然后选择复制 >复制 JS 路径。DevTools 会将一个 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 视频发表评论。

开发者工具的新变化

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