美文网首页工具与环境
Chrome开发者工具小技巧(1)

Chrome开发者工具小技巧(1)

作者: 我自静默向韶华 | 来源:发表于2017-05-23 16:15 被阅读0次

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

相关文章

网友评论

    本文标题:Chrome开发者工具小技巧(1)

    本文链接:https://www.haomeiwen.com/subject/iztgxxtx.html