20 条 Chrome DevTools 使用建议,盲猜这几个你不知道~

·  阅读 2705
20 条 Chrome DevTools 使用建议,盲猜这几个你不知道~

这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战


本篇译自:how-to-use-chrome-devtools-like-a-pro

Web 开发,每天都和 Chrome DevTools 打交道,即使是摸鱼冲浪,也会习惯性的 Ctrl+Shift+C 打开控制台看看~

本篇带来 20 条 Chrome DevTools 使用建议,让你看起来更专业、更 Dope ~(●'◡'●) ~

文末盲猜这几个你不知道🐶

1. 指定跳转

Sources 面板中,Ctrl + O 调起输入框,:行数:列 回车,即可跳转至之指定位置;

1_q7AYPrZiy4pNqAtx4wfIjQ.gif

2. 展开所有子节点

Elements 面板中,鼠标选中 DOM 节点,Alt + 点击 将展开节点的所有子节点~ 表示这个常用且好用!

1_GHjAdjdm0EArUJtQ8b6yaA.gif

3. 用CSS选择器搜寻DOM

Elements 面板中,CTRL + F 调起,输入 CSS 类即可进行搜索;

1_HUQ6JRI0MCi01OAb8j4McA.gif

4. 事件监听及跳转

Elements 面板中可以看到 Event Listeners,然后可以通过点击 Show Function Definition 跳转到对应事件;

1_MFpJ-23b-s-mxSaiRTnooA.gif

5. 运行自定义Snippets

Sources > Snippets,创建、输入名称、输入代码,点击 snippet 运行;

1_ltfQ2Lmqi5TMZGlgtM5NUg.gif

6. 设备仿真传感器

可以模拟触摸屏、地理位置坐标、加速度等;

1_Pq5c916pATZGX1RHvgSSGw.gif

7. 导入文件映射

Sources 面板, Sources 窗口中右键,单击选择Add Folder to Workspace,导入要被映射的网络资源,右键文件选择Map to Network Resources,更改代码查看效果;

1_XVdO7V-TSeg_-Ezg9xbx-w.gif

8. 拖拽选择

Sources 面板中,按住 Alt,拖拽鼠标进行选择,一下选一片;

1_muclOluklH3o81-xeOEhUw.gif

9. 快速编辑元素

Elements 面板中,直接选择 DOM 标签,双击编辑可快速修改;

1_lN5qcUffhV6rKtbbHCkYDQ.gif

10. 更改DevTools位置

更改 DevTools 位置,可以把窗口放左、右、下,或单独独立出来~

1_C5pSjlnuPKlj7AqCFYegXA.gif

11. 用$0获取元素

Console 面板中,输入 $0 打印在 Elments 面板中所选中的元素;

1_TJW5VR8XJBM2cuJeOrshuw.gif

12. 跳至Elements

Console 中跳转至 Elements 中的对于元素,右键选择Reveal in Elements Panel

1_GKEUuELnoGNvJSrvZ7qCKw.gif

13. 自定义调色板

点击样式中颜色的切换小图标即可打开自定义调色板;还可以选择Material Design,更多关于 Material Design

1_tpY2vDczVvqK2Csuo5qtGg.gif

14. 触发伪类

这个相信大家 bug 调试的时候都会用到~

1_G-1-lRMFESz-ENozpJdorA.gif

15. 媒体查询

媒体查询,这个不多做解释了,日常~

1_l0BK5HlImoCOw43ujXaSoQ.gif

16. 网络Film Strip

Film Strip 显示从开始到结束时间页面的渲染截图,像电影胶片一样~你可以单击截图并在 timeline 视图中查看;

1_ZYsWF7878SpwZii0kAVuEw.gif

17. 复制Response

Network 面板中选择请求链接,右键,你可以 Copy 很多东西,或者以不同的形式 Copy Response!

1_CeSZGgW6vudkS0t7h_JpkQ.gif

18. 多个光标选择

Sources 面板中,使用 Ctrl + 单击 添加多个光标选择,也可以使用Ctrl + U 撤消上次选择;

1_WiFQ7-tDYzandeXZ3JOMwQ.gif

19. 复制图片为Base64编码

按照如图操作~

1_OBMlbuZVBi5TgeF9oyLLRA.gif

20. 设置缓动曲线

可在样式面板中设置贝赛尔曲线~

1_Kle8C4UmWrBqJ9K8COdh-A.gif


小结:u1s1,有几个使用是有点常规,但是有几个也确实不知道,比如导入文件进行映射、运行自定义Snippets、复制图片为Base64等,平常基本没用到,算是扫盲了~ 学废了(掌声)

我是掘金安东尼,公众号同名,日拱一卒、日掘一金,再会~

分类:
前端
收藏成功!
已添加到「」, 点击更改