你不知道的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