最新消息:

Chrome F12 Web调试之调试插件推荐

Web调试 William 2048浏览

笔者Web开发调试经常用到Chrome浏览器的F12,它已成为笔者Web调试的必备工具。在此基础上,再加上优秀插件,那是神兵加利器,调试无阻挡。

关于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插件”//developer.chrome.com/extensions/devtools

感谢小伙伴:civerzhu-//segmentfault.com/a/1190000000494090

转载请注明:AspxHtml学习分享网 » Chrome F12 Web调试之调试插件推荐