性能指标可视化
现在,在录制了一个界面的加载后,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 面板。