Chrome 72 开发者工具新特性

现在，在录制了一个界面的加载后，DevTools （开发者工具）会在 Timings 一栏标记出像 DOMContentLoaded 、First Meaningful Paint （首次意义性绘制）这类性能指标。

高亮文本节点

现在，当鼠标悬停在一个文本节点上时，DevTools 会在视窗中将该文本节点高亮显示。

复制 JS 路径

假设你正在编写一个自动化测试，其中需要点击一个节点（通常使用的是 Puppeteer 的page.click() 函数），所以你想快捷地获取这个 DOM 节点的一个引用。常规的步骤是前往 Elements（元素）面板，右击那个节点，选择 Copy > Copy selector （ 复制 > 复制选择器 ），然后将得到的 CSS 选择器传到 document.querySelector() 。但如果那个节点位于Shadow DOM 中的话，这种途径就没用了，因为所获得的选择器将会是 Shadow 节点树中的路径。

要快捷地获取到一个 DOM 节点的引用，可右击这个 DOM 节点，选择 Copy > Copy JS path （ 复制 > 复制 JS 路径 ）。DevTools 会拷贝一份指向这个节点的 document.querySelector() 表达式。这种方式在 Shadow DOM 中会特别有用，当然在其他任意 DOM 节点中也可以使用。

DevTools 会拷贝一份像下面这样的一份代码到剪贴板：

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')
复制代码

Audits (审计) 面板相关的更新

Audits 面板这 Chrome 72 中运行的将是 Lighthouse 3.2。3.2 版本中有一个新的审计项，叫做 Detected JavaScript libraries (检测到的 JavaScript 库）。这项审计会把 Lighthouse 在页面中探测到的 JS 库都列出来。你可以在审计报告中的 Best Practices > Passed audits （最佳实践 > 通过了的审计）下找到这项审计结果。

另外，你还可以通过在命令菜单中输入 Lighthouse 或 PWA 访问 Audits 面板。