20 条 Chrome DevTools 使用建议,盲猜这几个你不知道~
![20 条 Chrome DevTools 使用建议,盲猜这几个你不知道~](https://static001.geekbang.org/infoq/06/06a71f2101cc95e4753e7297ee1968dd.jpeg)
Web 开发,每天都和 Chrome DevTools 打交道,即使是摸鱼冲浪,也会习惯性的 Ctrl+Shift+C
打开控制台看看~
本篇带来 20 条 Chrome DevTools 使用建议,让你看起来更专业、更 Dope ~(●'◡'●) ~
文末盲猜这几个你不知道🐶
1. 指定跳转
在 Sources
面板中,Ctrl + O
调起输入框,:行数:列
回车,即可跳转至之指定位置;
![](https://static001.geekbang.org/infoq/ab/ab0e6d82c2aceb000c4456ac56d147f9.gif)
2. 展开所有子节点
在 Elements
面板中,鼠标选中 DOM 节点,Alt + 点击
将展开节点的所有子节点~ 表示这个常用且好用!
![](https://static001.geekbang.org/infoq/79/79d90473c9b9276c0858275731ab8124.gif)
3. 用 CSS 选择器搜寻 DOM
在 Elements
面板中,CTRL + F
调起,输入 CSS 类即可进行搜索;
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
4. 事件监听及跳转
在 Elements
面板中可以看到 Event Listeners
,然后可以通过点击 Show Function Definition
跳转到对应事件;
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
5. 运行自定义 Snippets
Sources > Snippets
,创建、输入名称、输入代码,点击 snippet
运行;
![](https://static001.geekbang.org/infoq/44/44e4801b6b028cbf3fc259956be0e8df.gif)
6. 设备仿真传感器
可以模拟触摸屏、地理位置坐标、加速度等;
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
7. 导入文件映射
在 Sources
面板, Sources
窗口中右键,单击选择Add Folder to Workspace
,导入要被映射的网络资源,右键文件选择Map to Network Resources
,更改代码查看效果;
![](https://static001.geekbang.org/infoq/cb/cbc0d6021850d08b3f2e767a20679c3e.gif)
8. 拖拽选择
在 Sources
面板中,按住 Alt
,拖拽鼠标进行选择,一下选一片;
![](https://static001.geekbang.org/infoq/ad/ad71c1eaa5af2f3309ccef68d712ca4b.gif)
9. 快速编辑元素
在 Elements
面板中,直接选择 DOM 标签,双击编辑可快速修改;
![](https://static001.geekbang.org/infoq/21/2189ba28a2ee471e62a725744b34d646.gif)
10. 更改 DevTools 位置
更改 DevTools 位置,可以把窗口放左、右、下,或单独独立出来~
![](https://static001.geekbang.org/infoq/d1/d1c0caadc77be05978a7e65030ed071c.gif)
11. 用 $0 获取元素
在 Console
面板中,输入 $0
打印在 Elments
面板中所选中的元素;
![](https://static001.geekbang.org/infoq/59/5915488b8644f1742e40a88df640def6.gif)
12. 跳至 Elements
从 Console
中跳转至 Elements
中的对于元素,右键选择Reveal in Elements Panel
;
![](https://static001.geekbang.org/infoq/81/81d6e7d534cd293975fc8a781a14f981.gif)
13. 自定义调色板
点击样式中颜色的切换小图标即可打开自定义调色板;还可以选择Material Design
,更多关于 Material Design;
![](https://static001.geekbang.org/infoq/43/43c2bfb329ac205d29c807b81f341a1f.gif)
14. 触发伪类
这个相信大家 bug 调试的时候都会用到~
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
15. 媒体查询
媒体查询,这个不多做解释了,日常~
![](https://static001.geekbang.org/infoq/e6/e69342edb91d2b795e0fd5a9b30ea0e7.gif)
16. 网络 Film Strip
Film Strip
显示从开始到结束时间页面的渲染截图,像电影胶片一样~你可以单击截图并在 timeline
视图中查看;
![](https://static001.geekbang.org/infoq/8d/8d7a95d7e1283ced9c7ca4da836febcf.gif)
17. 复制 Response
在 Network
面板中选择请求链接,右键,你可以 Copy 很多东西,或者以不同的形式 Copy Response!
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
18. 多个光标选择
在 Sources
面板中,使用 Ctrl + 单击
添加多个光标选择,也可以使用Ctrl + U
撤消上次选择;
![](https://static001.geekbang.org/infoq/78/78aa17d78fd630b1a1b9aeb9924083a7.gif)
19. 复制图片为 Base64 编码
按照如图操作~
![](https://static001.geekbang.org/infoq/d8/d806a40404345051b065141a274b6a02.gif)
20. 设置缓动曲线
可在样式面板中设置贝赛尔曲线~
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
<hr>
小结:u1s1,有几个使用是有点常规,但是有几个也确实不知道,比如导入文件进行映射、运行自定义 Snippets、复制图片为 Base64 等,平常基本没用到,算是扫盲了~ 学废了(掌声)
我是掘金安东尼,公众号同名,日拱一卒、日掘一金,再会~
版权声明: 本文为 InfoQ 作者【掘金安东尼】的原创文章。
原文链接:【http://xie.infoq.cn/article/f59a5b460d5b56b4f5a3c6445】。文章转载请联系作者。
评论