5个 Chrome开发者工具实验性功能

188 阅读1分钟

1_PFJ5UGke-8gze_lcmzX5fw.jpeg

原文:blog.bitsrc.io/google-chro…

Chrome开发者工具是前端用的最多工具,但很多人不知道Chrome的隐藏功能。

这篇文章会介绍Chrome开发者工具5个实验性功能,大家都应该试一试。

1. 样式概览

样式概览是展示页面上所有被用到样式

样式概览详细介绍颜色、字体、没有使用声明、媒体查询数量。当我们修改UI界面时,这个功能非凡有效,同时不用使用第三方软件,像Color Picker。

1_2UARjBrielEWvEQGmNRB3w.png

2. CSP违规检查

Chrome开发者工具CSP违规能捕获可能异常并在该代码中打上断点

这个功能提高我们应用的安全性,能减少像XSS(Cross-Site Scripting)这样代码缺陷

2.png

3. 字体编辑工具

在不修改源代码的情况下,实时改变字体并查看效果

字体编辑工具能设置字体、字号、加粗、行间距等,并能实时查看效果。

3.gif

4. 双屏模式

启动双屏模式后,能在Chrome开发者模拟器上应用在双屏下展现效果

这个功能能拯救要运行在三星折叠手机上应用

4.png

5. 可访问元素树

可以检查为每个 DOM 元素创建的可访问性对象

使用这个功能可以看到更多访问性的细节

5.png

总结

在本文中,讨论了5个强大但不常见的Chrome开发者工具中实验性功能。希望能帮助到你,让开发变得更加简单。

除了这5个功能外,你还知道哪些功能,在评论区一起讨论吧