Chrome 72 开发者工具更新

性能指标的可视化

在记录页面加载信息之后,开发者工具在“Timings”中显示诸如“DOM content loaded”或“First MeaningfulPaint”等指标。

高亮文本节点

当鼠标悬停育一个DOM树种的文本节点上面时,开发者工具将为你高亮显示文本。

拷贝JS路径

假如你在写自动测试,其中包括点击某个节点的操作,所以你想快速得到那个DOM节点的引用。普通的方式是去元素面板右键点击节点然后选择“Copy --> Copy selector”,然后使用拷贝出来的css选择器。但如果节点 在“shadow DOM”里面的话,这办法就行不通了。
现在你可以右键点击节点然后选择“Copy --> Copy JS path”,开发者工具将在剪贴板中放入一个“document.querySelector()”的表达式。这种方法在Shadow DOM的时候也好使。

审查面板更新

审查面板现在支持Lighthouse 3.2了。


本文翻译自https://developers.google.com/web/updates/2018/11/devtools

发布了20 篇原创文章 · 获赞 9 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/time1812/article/details/85565669