今天整好遇到了shadow-box相关的内容,于是进行了搜索和学习,并发现了一些比较实用的“Chrome开发者工具”的小技巧,给大家总结分享一下。
1. 打开Shadow DOM显示
浏览器对例如Video、Password等组件进行了封装,无法查看到组件的详细代码,不利于调试。幸好,通过配置能够在元素标签器中显示被隐藏的组件代码。
实现:More(‘三个点’图标)→Settings → Elements → Show user agent shadow DOM

2.选择多个匹配项并编辑
当在Sources标签下编辑文件时,按下Ctrl + D (Cmd + D) ,当前选中的单词的下一个匹配也会被选中,有利于你同时对它们进行编辑。

3.格式化凌乱的js源码
Pretty Print的按钮在Sources标签的左下角。

4.强制改变元素状态(方便查看不同状态下元素的样式)
chrome控制台有一个可以模拟CSS状态的功能,例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能查看不同状态下元素的样式。

5.颜色选择器(快捷的获取颜色值)

6.改变颜色格式
在颜色预览功能使用快捷键Shift + Click,可以在rgba、hsl和十六进制表示法来回切换颜色的格式

7.设备传感仿真
设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。
实现:More(‘三个点’图标)→More tools→ Sensors

8.设备模式(模拟H5页面、APP进行调试)
试想一下,如果我们每在Visual studio工具上开发完一个功能又得跑到手机上调试,那得多烦,开发效率多低呀。
实现:修改UA:More(‘三个点’图标)→More tools→ Network conditions


9.找到新添加的CSS样式内容(新添加内容较多时,非常实用)
页面中添加完元素之后,按图示路径查找到新添加的样式。

Chrome提供给开发人员的调试工具以及方法技巧非常多,本文仅举几个用到过的小栗子,更多内容实例以后再行补充,更多功能及工具的使用方法有待大家多摸索、使用。
欢迎补充!!!
(本文仅限经验分享)
原文链接:http://www.cnblogs.com/liyunhua/p/4544738.html(部分引用)
网友评论