今天整好遇到了shadow-box相关的内容，于是进行了搜索和学习，并发现了一些比较实用的“Chrome开发者工具”的小技巧，给大家总结分享一下。
1. 打开Shadow DOM显示
浏览器对例如Video、Password等组件进行了封装，无法查看到组件的详细代码，不利于调试。幸好，通过配置能够在元素标签器中显示被隐藏的组件代码。
实现：More(‘三个点’图标）→Settings → Elements → Show user agent shadow DOM
shadow-dom.gif
2.选择多个匹配项并编辑
当在Sources标签下编辑文件时，按下Ctrl + D (Cmd + D) ，当前选中的单词的下一个匹配也会被选中，有利于你同时对它们进行编辑。
3.格式化凌乱的js源码
Pretty Print的按钮在Sources标签的左下角。
prettyPrint.gif
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
型号选择
UA修改
9.找到新添加的CSS样式内容（新添加内容较多时，非常实用）
页面中添加完元素之后，按图示路径查找到新添加的样式。
newDiv
Chrome提供给开发人员的调试工具以及方法技巧非常多，本文仅举几个用到过的小栗子，更多内容实例以后再行补充，更多功能及工具的使用方法有待大家多摸索、使用。
欢迎补充！！！
（本文仅限经验分享）
原文链接：http://www.cnblogs.com/liyunhua/p/4544738.html（部分引用）
网友评论