【Chrome】914- 12 张动图学习 Chrome 调试技巧

傷城~ 2022-11-15 05:53 200阅读 0赞

![1801f1297b3f05f2dc73e6f1815e72e4.png][]

> 来自：掘金
> 
> 作者：老姚
> 
> 链接：https://juejin.cn/post/6844903604839514125

对于每个前端从业者来说，除了F5键之外，用的最多的另外一个键就是F12了。

今天，大神（@小鱼二）推荐我一个网站，才知道chrome还有各种骚姿势。

网站是：umaar.com/dev-tips/

所有的我都看了，这里随便列举几个个人之前不了解，觉得挺有用的。

### 1.曾经，在线调伪类样式困扰过你？ ###

![9ab3c12ab9d37d62a3744f83e44bad05.gif][]

### 2.源代码快速定位到某一行！ctrl + p ###

![4cbb5789508dfe59a8107c8505feb5f1.gif][]

### 3.联调接口失败时，后台老哥总管你要response？ ###

![5e998cda30a8810ba1005ea422dcf6c7.gif][]

### 4.你还一层层展开dom？Alt + Click ###

![8692c158fecbe2dc2ed4457e67730144.gif][]

### 5.是不是报错了，你才去打断点？ ###

![55c5f1759b1522928afb0b95ff720a04.gif][]

### 6.你是不是经常想不起来，在哪绑定事件的？ ###

![bdebd30bfde9b9f930a50316222e4137.gif][]

### 7.你是不是打断点时还要去改代码？ ###

![b8ff7ee531d6cbd5be75cfcdbdd20ecf.gif][]

### 8.看dom层级的最直观的方式？ ###

![5bee1b1e06c54cddfac9e2927713e793.gif][]

### 9.查一些特定的请求，过滤器用过吗？ ###

![261435c56892dafab8b96307163cedda.gif][]

### 10.在Elements面板调整dom结构很不方便？ ###

![d724c80db9a76899283aaf8ec5418707.gif][]

### 11.想知道，某图片加载的代码在哪？Initiator！！ ###

![83acc7602e4fa52b0b46fc4bbb929b34.gif][]

### 12.不想加载某个文件了？ ###

![7a5b012c3cd1b946f75804f4315be58e.gif][]

多的就不列举了，可以看看开头的网站。看了有几个功能我电脑（win10）是没有的，应该跟chrome版本有关。

开发者工具的功能确实挺多，多得有时根本用不上，官网教程建议每个前端人员都看看：

https://developers.google.com/web/tools/chrome-devtools/

中文版：

https://www.css88.com/doc/chrome-devtools/

======================

补充：

见评论中多人问gif制作软件是什么。

搜索了一下，应该是www.techsmith.com/，看着说明，表示软件太专业。。

但我用过两个小软件很不错，非常容易上手：

*  录屏：www.cockos.com/licecap/
 *  屏幕放大：https://docs.microsoft.com/zh-cn/sysinternals/downloads/zoomit

效果如下：

![42b9fd33080d811bbbd0e968b8578223.gif][]

![c5a83664deac0da97e4cf7653f011a0c.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![e3065dbd733f18e0a8a64eebeb9854d7.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[1801f1297b3f05f2dc73e6f1815e72e4.png]: /images/20221022/b42fda54a49942f2b8dcda70c81f37c6.png
[9ab3c12ab9d37d62a3744f83e44bad05.gif]: /images/20221022/3ca0b269213940cd960b2c329b720835.png
[4cbb5789508dfe59a8107c8505feb5f1.gif]: https://img-blog.csdnimg.cn/img_convert/4cbb5789508dfe59a8107c8505feb5f1.gif
[5e998cda30a8810ba1005ea422dcf6c7.gif]: https://img-blog.csdnimg.cn/img_convert/5e998cda30a8810ba1005ea422dcf6c7.gif
[8692c158fecbe2dc2ed4457e67730144.gif]: https://img-blog.csdnimg.cn/img_convert/8692c158fecbe2dc2ed4457e67730144.gif
[55c5f1759b1522928afb0b95ff720a04.gif]: https://img-blog.csdnimg.cn/img_convert/55c5f1759b1522928afb0b95ff720a04.gif
[bdebd30bfde9b9f930a50316222e4137.gif]: https://img-blog.csdnimg.cn/img_convert/bdebd30bfde9b9f930a50316222e4137.gif
[b8ff7ee531d6cbd5be75cfcdbdd20ecf.gif]: https://img-blog.csdnimg.cn/img_convert/b8ff7ee531d6cbd5be75cfcdbdd20ecf.gif
[5bee1b1e06c54cddfac9e2927713e793.gif]: https://img-blog.csdnimg.cn/img_convert/5bee1b1e06c54cddfac9e2927713e793.gif
[261435c56892dafab8b96307163cedda.gif]: https://img-blog.csdnimg.cn/img_convert/261435c56892dafab8b96307163cedda.gif
[d724c80db9a76899283aaf8ec5418707.gif]: https://img-blog.csdnimg.cn/img_convert/d724c80db9a76899283aaf8ec5418707.gif
[83acc7602e4fa52b0b46fc4bbb929b34.gif]: https://img-blog.csdnimg.cn/img_convert/83acc7602e4fa52b0b46fc4bbb929b34.gif
[7a5b012c3cd1b946f75804f4315be58e.gif]: https://img-blog.csdnimg.cn/img_convert/7a5b012c3cd1b946f75804f4315be58e.gif
[42b9fd33080d811bbbd0e968b8578223.gif]: https://img-blog.csdnimg.cn/img_convert/42b9fd33080d811bbbd0e968b8578223.gif
[c5a83664deac0da97e4cf7653f011a0c.gif]: https://img-blog.csdnimg.cn/img_convert/c5a83664deac0da97e4cf7653f011a0c.gif
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[e3065dbd733f18e0a8a64eebeb9854d7.gif]: https://img-blog.csdnimg.cn/img_convert/e3065dbd733f18e0a8a64eebeb9854d7.gif