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

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应用商店链接
jQuery Audit是让你可以在DevTools查看页面节点的jQuery属性和数据，方便你调试使用jQuery库的web应用。你可以在上面看到你选中的页面元素的jQuery的events、data等属性。例如，很多人都喜欢用$.data()来让jQuery节点对象缓存一些数据，通过jQuery Audit你可以很方便地看到你缓存的数据。

jQuery Audit会自动在Elements面板的最前面加上window和document对象，这对你调试全局的对象很有帮助。例如，出于对性能的考虑，当你想查看绑定在window上绑定了哪些事件的时候，jQuery Audit可以帮你找到。

其他详细的用法可以查看官方文档。

JS Runtime Inspector

安装地址：Chrome应用商店链接
JS Runtime Inspector让你可以在DevTools上直接通过关键词来搜索页面上JavaScript对象。当你想知道此时你的程序中某个JavaScript对象的属性和数据，然而你并不知道它所在哪个作用域，只知道对象名称，因而你不能在控制台用window.xxxObj的方式来访问这个对象，所以此时你可以借助JS Runtime Inspector来查找这个对象了。

如图所示，可以通过对象名称和值来匹配查找，点击搜索后会在控制台输出查找到的结果。

Devtools redirect

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

jQuery Debugger

安装地址：Chrome应用商店链接
jQuery Debugger顾名思义就是帮你debug jQuery啦:-) 它主要有两大功能：
1. 通过选择器字符串来查找页面上的某个元素，等同于你在代码里写$('ul>li')这样的方式。

2. 查看页面某个元素的jQuery对象属性。这有点类似前面说过的jQuery Audit插件。

Grunt DevTools

安装地址：Chrome应用商店链接
一个可以在DevTools快速运行和查看Grunt任务的插件。有了它，你就不用经常地在浏览器工具、terminal和编辑器上来回切换窗口了。

详细描述可以查看官方文档。

CoffeeScript Console

安装地址：Chrome应用商店链接
有了它，你可以在DevTools上直接执行CoffeeScript和JavaScript之间的代码转换。

Angular Batarang

安装地址：Chrome应用商店链接
这个不用解释，开发和调试Angular.js应用的神器。

类似的针对不同js框架的调试工具还有：Backbone DevTools 、 KnockoutJS Context

DevTools Theme

最后介绍的不是DevTools的插件，而是主题。大家或许有疑问：这个由什么用呢？嗯，没错，就是装B用的。当别人看着你在调试网页的时候，打开的Chrome开发工具竟然是如此高大上。。。
ZeroDarkMatrix主题：Chrome应用商店链接

另外还有：
Dracula主题：Chrome应用商店链接
Flatland主题：Chrome应用商店链接
安装这些主题的方法可以查看ZeroDarkMatrix的说明。

总结

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

参考

http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/
https://developer.chrome.com/extensions/devtools