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

svtter 发布于2019-08-21 12:17 / 1778人阅读

摘要：下面推荐几款插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。这有点类似前面说过的插件。类似的针对不同框架的调试工具还有最后介绍的不是的插件，而是主题。总结好的，这次的插件就推荐了这几个。

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

idc机房托管专线服务 Chrome DevTools chrome-devtools DevTools 你不知道的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87533.html

推荐几款好用的Chrome插件

摘要：今天就来跟大家分享一下工作中用到的几款插件。是一款功能强大的网页调试与发送网页请求的插件。俗称油猴子，是一款功能非常强大的插件，他包含方便的脚本管理脚本概览设置多样性脚本自动更新安全兼容性同步编辑器语法检查快速开发卸载等功能。 ‘工欲善其事，必先利其器’。优秀的开发者不仅体现在其在技术方面的精通，还体现在其对各种开发工具的充分了解与使用，这会让其开发效率事半功倍。作为一个前端开发者，平...

fox_soyoung 2019-08-01 18:19 评论0 收藏0
推荐几款好用的Chrome插件

摘要：今天就来跟大家分享一下工作中用到的几款插件。是一款功能强大的网页调试与发送网页请求的插件。俗称油猴子，是一款功能非常强大的插件，他包含方便的脚本管理脚本概览设置多样性脚本自动更新安全兼容性同步编辑器语法检查快速开发卸载等功能。 ‘工欲善其事，必先利其器’。优秀的开发者不仅体现在其在技术方面的精通，还体现在其对各种开发工具的充分了解与使用，这会让其开发效率事半功倍。作为一个前端开发者，平...

lpjustdoit 2019-08-29 14:08 评论0 收藏0
推荐几款好用的Chrome插件

摘要：今天就来跟大家分享一下工作中用到的几款插件。是一款功能强大的网页调试与发送网页请求的插件。俗称油猴子，是一款功能非常强大的插件，他包含方便的脚本管理脚本概览设置多样性脚本自动更新安全兼容性同步编辑器语法检查快速开发卸载等功能。 ‘工欲善其事，必先利其器’。优秀的开发者不仅体现在其在技术方面的精通，还体现在其对各种开发工具的充分了解与使用，这会让其开发效率事半功倍。作为一个前端开发者，平...

wums 2019-08-21 18:32 评论0 收藏0
五种前端开发必备的调试技术

摘要：在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。移动调试断点断点方法远程映射本地调试在移动上面开发调试是很复杂的，所以就有了。在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点 debugger断点 native方法hook 远程映射本地调试 Weinre 在移动上面开...

张红新 2019-08-19 14:23 评论0 收藏0