原文:blog.bitsrc.io/google-chro…
Chrome开发者工具是前端用的最多工具,但很多人不知道Chrome的隐藏功能。
这篇文章会介绍Chrome开发者工具5个实验性功能,大家都应该试一试。
1. 样式概览
样式概览是展示页面上所有被用到样式
样式概览详细介绍颜色、字体、没有使用声明、媒体查询数量。当我们修改UI界面时,这个功能非凡有效,同时不用使用第三方软件,像Color Picker。
2. CSP违规检查
Chrome开发者工具CSP违规能捕获可能异常并在该代码中打上断点
这个功能提高我们应用的安全性,能减少像XSS(Cross-Site Scripting)这样代码缺陷
3. 字体编辑工具
在不修改源代码的情况下,实时改变字体并查看效果
字体编辑工具能设置字体、字号、加粗、行间距等,并能实时查看效果。
4. 双屏模式
启动双屏模式后,能在Chrome开发者模拟器上应用在双屏下展现效果
这个功能能拯救要运行在三星折叠手机上应用
5. 可访问元素树
可以检查为每个 DOM 元素创建的可访问性对象
使用这个功能可以看到更多访问性的细节
总结
在本文中,讨论了5个强大但不常见的Chrome开发者工具中实验性功能。希望能帮助到你,让开发变得更加简单。
除了这5个功能外,你还知道哪些功能,在评论区一起讨论吧