chrome开发者工具各种骚技巧

小鱼儿 2022-05-25 09:29 245阅读 0赞

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

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

网站是：[umaar.com/dev-tips/][umaar.com_dev-tips]

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

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

![1634df09634771d9_imageslim][]

### 2.源代码快速定位到某一行 ###

![1634e3570cd65624_imageslim][]

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

![1634e35c4f2022e8_imageslim][]

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

![1634e386ca68401d_imageslim][]

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

![1634e391d78c2ccf_imageslim][]

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

![1634dfc23d6b8c65_imageslim][]

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

![1634e023e06569dd_imageslim][]

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

![1634e38c30aa44f4_imageslim][]

### 9.查一下奇怪的请求，过滤器用过吗？ ###

![1634e396bfc4f2a8_imageslim][]

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

![1634e0c3fb6095d6_imageslim][]

###  ###

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

![1634e1c2fa3c98f7_imageslim][]

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

![1634e3a5cba66c92_imageslim][]

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

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

[developers.google.com/web/tools/c…][developers.google.com_web_tools_c]

Fundebug提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

您可能感兴趣的

1.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]  
    
2.  [10个用Console来Debug的高级技巧][10_Console_Debug]  
    
3.  [Fundebug支持区分Source Map版本][Fundebug_Source Map]  
    
4.  [Debug前端HTML/CSS][Debug_HTML_CSS]

原文链接：https://juejin.im/post/5af53823f265da0b75282b0f

[umaar.com_dev-tips]: https://link.juejin.im?target=https%3A%2F%2Fumaar.com%2Fdev-tips%2F
[1634df09634771d9_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634df09634771d9?imageslim
[1634e3570cd65624_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e3570cd65624?imageslim
[1634e35c4f2022e8_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e35c4f2022e8?imageslim
[1634e386ca68401d_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e386ca68401d?imageslim
[1634e391d78c2ccf_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e391d78c2ccf?imageslim
[1634dfc23d6b8c65_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634dfc23d6b8c65?imageslim
[1634e023e06569dd_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e023e06569dd?imageslim
[1634e38c30aa44f4_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e38c30aa44f4?imageslim
[1634e396bfc4f2a8_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e396bfc4f2a8?imageslim
[1634e0c3fb6095d6_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e0c3fb6095d6?imageslim
[1634e1c2fa3c98f7_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e1c2fa3c98f7?imageslim
[1634e3a5cba66c92_imageslim]: https://user-gold-cdn.xitu.io/2018/5/11/1634e3a5cba66c92?imageslim
[developers.google.com_web_tools_c]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Fchrome-devtools%2F
[1386816-20180502112633892-1858746955.png]: /images/20220525/8d3534d33c454737ac2631cd1dfd2b9f.png
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[Fundebug_Source Map]: https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/
[Debug_HTML_CSS]: https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/