Chrome开发者工具小技巧（1）

        今天整好遇到了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（部分引用）