你不知道的Chrome DevTools（4）：推荐几款DevTools插件

骑猪看日落 2023-10-11 14:08 20阅读 0赞

Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的标签代码就能看到页面效果，这年头谁不会用Chrome开发者工具呀。

但是Chrome能做的远不止你平常用的那么简单，这一个小小的开发工具集成了很多高级的功能你未必知道。我打算把一些Chrome DevTools上使用的高级技巧写成《你不知道的Chrome DevTools》这一系列的博文，希望大家一起学习学习。

--------------------

## 关于DevTools插件 ##

应用于Chrome开发者工具的插件不同于普通的Chrome应用或者插件，它是给你的Chrome DevTools扩展更多的功能，方便你查看和调试web程序。它的安装方法跟Chrome应用的安装方法是一样的，可以通过Chrome应用商店或者直接crx安装文件来安装。

下面推荐几款DevTools插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。

### jQuery Audit ###

安装地址：[Chrome应用商店链接][Chrome]  
jQuery Audit是让你可以在DevTools查看页面节点的jQuery属性和数据，方便你调试使用jQuery库的web应用。你可以在上面看到你选中的页面元素的jQuery的events、data等属性。例如，很多人都喜欢用`$.data()`来让jQuery节点对象缓存一些数据，通过jQuery Audit你可以很方便地看到你缓存的数据。  
![请输入图片描述][format_png]  
jQuery Audit会自动在Elements面板的最前面加上window和document对象，这对你调试全局的对象很有帮助。例如，出于对性能的考虑，当你想查看绑定在window上绑定了哪些事件的时候，jQuery Audit可以帮你找到。  
![请输入图片描述][format_png 1]  
其他详细的用法可以查看[官方文档][Link 1]。

### JS Runtime Inspector ###

安装地址：[Chrome应用商店链接][Chrome 1]  
JS Runtime Inspector让你可以在DevTools上直接通过关键词来搜索页面上JavaScript对象。当你想知道此时你的程序中某个JavaScript对象的属性和数据，然而你并不知道它所在哪个作用域，只知道对象名称，因而你不能在控制台用`window.xxxObj`的方式来访问这个对象，所以此时你可以借助JS Runtime Inspector来查找这个对象了。  
![请输入图片描述][format_png 2]  
如图所示，可以通过对象名称和值来匹配查找，点击搜索后会在控制台输出查找到的结果。

### Devtools redirect ###

安装地址：[Chrome应用商店链接][Chrome 2]  
Devtools redirect可以帮你给页面上的网络连接重定位。事实上网络请求重定位的功能，可以用fiddler或者ngix轻松实现，但Devtools redirect可以让你直接在浏览器上配置这些重定位。  
![请输入图片描述][format_png 3]

### jQuery Debugger ###

安装地址：[Chrome应用商店链接][Chrome 3]  
jQuery Debugger顾名思义就是帮你debug jQuery啦:-) 它主要有两大功能：  
1. 通过选择器字符串来查找页面上的某个元素，等同于你在代码里写`$('ul>li')`这样的方式。  
![请输入图片描述][format_png 4]  
2. 查看页面某个元素的jQuery对象属性。这有点类似前面说过的jQuery Audit插件。  
![请输入图片描述][format_png 5]

### Grunt DevTools ###

安装地址：[Chrome应用商店链接][Chrome 4]  
一个可以在DevTools快速运行和查看Grunt任务的插件。有了它，你就不用经常地在浏览器工具、terminal和编辑器上来回切换窗口了。  
![请输入图片描述][format_png 6]  
详细描述可以查看[官方文档][Link 2]。

### CoffeeScript Console ###

安装地址：[Chrome应用商店链接][Chrome 5]  
有了它，你可以在DevTools上直接执行CoffeeScript和JavaScript之间的代码转换。  
![请输入图片描述][format_png 7]

### Angular Batarang ###

安装地址：[Chrome应用商店链接][Chrome 6]  
这个不用解释，开发和调试Angular.js应用的神器。  
![请输入图片描述][format_png 8]  
类似的针对不同js框架的调试工具还有：[Backbone DevTools][] 、 [KnockoutJS Context][]

### DevTools Theme ###

最后介绍的不是DevTools的插件，而是主题。大家或许有疑问：这个由什么用呢？嗯，没错，就是装B用的。当别人看着你在调试网页的时候，打开的Chrome开发工具竟然是如此高大上。。。  
ZeroDarkMatrix主题：[Chrome应用商店链接][Chrome 7]  
![请输入图片描述][format_png 9]  
另外还有：  
Dracula主题：[Chrome应用商店链接][Chrome 8]  
Flatland主题：[Chrome应用商店链接][Chrome 9]  
安装这些主题的方法可以查看ZeroDarkMatrix的[说明][Link 3]。

## 总结 ##

好的，这次的DevTools插件就推荐了这几个。总的来说，Chrome浏览器真的很强大，DevTools工具为我们的开发调试工作带来很多方便。如果大家对于如何开发DevTools插件有想法的话，可以去Chrome DevTools的官方文档看看“如何开发DevTools插件”[https://developer.chrome.com/extensions/devtools][https_developer.chrome.com_extensions_devtools]。

## 参考 ##

[http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/][http_addyosmani.com_blog_devtools-extensions-for-webapp-developers]  
[https://developer.chrome.com/extensions/devtools][https_developer.chrome.com_extensions_devtools]

[Chrome]: https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VHOQ?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VIaw?x-oss-process=image/format,png
[Link 1]: https://github.com/zertosh/jquery-audit
[Chrome 1]: https://chrome.google.com/webstore/detail/js-runtime-inspector/iilpjebedgohcmlffhnkhbjhabkdhfmn
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VIeg?x-oss-process=image/format,png
[Chrome 2]: https://chrome.google.com/webstore/detail/devtools-redirect/jmhdebkkippcccflcoddckhjjfgnfhnp
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VINg?x-oss-process=image/format,png
[Chrome 3]: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VJaQ?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VJag?x-oss-process=image/format,png
[Chrome 4]: https://chrome.google.com/webstore/detail/grunt-devtools/fbiodiodggnlakggeeckkjccjhhjndnb
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VJeA?x-oss-process=image/format,png
[Link 2]: https://github.com/vladikoff/grunt-devtools
[Chrome 5]: https://chrome.google.com/webstore/detail/coffeeconsole/ladbkfdlnaibelfidknofapbbdlhadfp
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VJTQ?x-oss-process=image/format,png
[Chrome 6]: https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VJUw?x-oss-process=image/format,png
[Backbone DevTools]: https://github.com/spect88/backbone-devtools
[KnockoutJS Context]: https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof
[Chrome 7]: https://chrome.google.com/webstore/detail/devtools-theme-zero-dark/bomhdjeadceaggdgfoefmpeafkjhegbo
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY2VJMA?x-oss-process=image/format,png
[Chrome 8]: https://chrome.google.com/webstore/detail/dracula-theme-for-devtool/gedipeckgflanbhlcglokjjacilfidda
[Chrome 9]: https://chrome.google.com/webstore/detail/devtools-theme-flatland/ghngaepikegoilihhbhdipfbfifhkeeo
[Link 3]: https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme
[https_developer.chrome.com_extensions_devtools]: https://developer.chrome.com/extensions/devtools
[http_addyosmani.com_blog_devtools-extensions-for-webapp-developers]: http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/