Chrome 72 开发者工具新特性

栏目: JavaScript · 发布时间: 7年前

内容简介:现在,在录制了一个界面的加载后,DevTools (开发者工具)会在现在,当鼠标悬停在一个文本节点上时,DevTools 会在视窗中将该文本节点高亮显示。假设你正在编写一个自动化测试,其中需要点击一个节点(通常使用的是 Puppeteer 的page.click() 函数),所以你想快捷地获取这个 DOM 节点的一个引用。常规的步骤是前往 Elements(元素)面板,右击那个节点,选择

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

Chrome 72 开发者 <a href='https://www.codercto.com/tool.html'>工具</a> 新特性

高亮文本节点

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

Chrome 72 开发者工具新特性

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

Chrome 72 开发者工具新特性

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

Chrome 72 开发者工具新特性

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

Chrome 72 开发者工具新特性

以上所述就是小编给大家介绍的《Chrome 72 开发者工具新特性》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

奇点系列

奇点系列

彼得•蒂尔、里德•霍夫曼、本•霍洛维茨、埃里克•杰克逊等 / 高玉芳、路蒙佳、杨晓红、徐彬等 / 中信出版社 / 2015-6-20 / 182.00

1.硅谷创投教父、PayPal创始人彼得•蒂尔、LinkedIn创始人里德•霍夫曼、创业导师本•霍洛维茨、“PayPal黑帮”初创成员埃里克•杰克逊联合作品。 2.彼得•蒂尔与埃隆•马斯克的首次交锋,PayPal从0到1改变全球金融的生死突围,商业硬汉的创业史诗,揭秘“PayPal黑帮”的创业维艰与联盟关系。 3.《人民日报》推荐创业者必读书目!“奇点系列”的作者们以及“PayPal黑......一起来看看 《奇点系列》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换