Chrome 72 开发者工具新特性

性能指标可视化

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

First Meaningful Paint in the Timing section

高亮文本节点

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

Highlighting a text node

复制 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 节点中也可以使用。

Copy JS path

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 (最佳实践 > 通过了的审计)下找到这项审计结果。

Detected JavaScript libraries

另外,你还可以通过在命令菜单中输入 LighthousePWA 访问 Audits 面板。

Typing 'lighthouse' into the Command Menu

猜你喜欢

转载自juejin.im/post/5c06878c5188257c3045d003