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

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

此版本说明的视频版

直观呈现性能指标

记录网页加载后,DevTools 现在会在 Timings 部分标记 DOMContentLoadedFirst Meaningful Paint 等性能指标。

“Timing”部分中的“First Meaningful Paint”

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

突出显示文本节点

现在,当您在 DOM 树中悬停在文本节点上时,DevTools 会在视口中突出显示该文本节点。

突出显示文本节点

图 2. 突出显示文本节点

复制 JS 路径

假设您正在编写一项涉及点击节点(可能使用 Puppeteer 的 page.click() 函数)的自动化测试,并且您希望快速获取对该 DOM 节点的引用。常规工作流程是前往“元素”面板,右键点击 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)')

“审核”面板更新

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

已检测到的 JavaScript 库

图 4. 已检测到的 JavaScript 库

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

在命令菜单中输入“lighthouse”

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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