Chrome开发者工具不完全指南（六、插件篇）

本篇是Chrome开发者工具的结尾篇，最后为大家介绍几款功能强大的插件。在chrome商店里面有很多插件，没事建议大家去逛逛。不过需要FQ，所以诸位请自备神器。

一、皮肤插件

首先是大家期盼已久，翘首以盼的皮肤插件。这款插件叫DevTools Theme: Zero Dark Matrix.在商店中下载之，然后打开这个地址:chrome://flags,找到Enable Developer Tools experments （可以查找experments关键字迅速锁定之）勾选启用复选框。重启浏览器，打开开发者选项，点击小齿轮，可以看到Experments这选项，选择后在弹出面板中勾选 Allow custom UI themes，重启浏览，然后看到:

高达上的皮肤就是这样出来滴。据说还有许多方式可以更改，不过露珠目前就用的事这种方式。有兴趣的同学可以去试试看。

二、Performance-Analyser(网页性能分析)
这款插件是用来分析你的网页加载性能的，包括http请求，执行期的时间，以及每种http请求文件的大小，占比。首先下载之，随意打开一个界面，按下插件图标，可以看到分析页面：

你可以利用这款插件来分析你的界面资源加载的整体情况，并试着做一些优化和调整。

三、(FeHelper)WEB前端助手
这款插件包括了一系列功能，很丰富。是国人开发的，功能包括：json格式化，html格式化，二维码生成，编码规范检测等等不一而足。当你在浏览器中打开一个后台接口的时候，如果该接口返回的是json字符串，那么它会自动将其格式化。下面是它的一些功能列表，不具体一一示范：

四、POSTMAN
该插件是模拟发送请求的，后台和前台开发人员都可以用到。它是一个简化版的fiddler，功能虽然没有它强大，但是界面胜之，操作性也胜之，还有规范的API，更新也一直在继续。所以用之有木有:

五、Visual Event

网页事件监听，能帮你捕获到目前网页上的各个元素的事件监听状况。打开一个界面，按下扩展按钮:

把鼠标放到有背景色的元素上去，可以看到它们的时间来源和绑定的函数。对于一些简单的事件检测还是蛮有用的。比较复杂的就没什么卵用了。

六、二维码扫描

这个功能对手机开发来说还是不错的。扫一扫就在浏览器中打开了。在FF浏览器中自带的功能，对于Chrome来说怎么可以木有呢？不过这功能太简单，太低档次，太多了（不过很有用）。就不上图了。

七、WhatFont

找到网页的字体。开启功能后把鼠标停留在文本上，会弹出该字体名称。所以你可以所以copy你喜欢的字体啦。

八、Speed Tracer

这个是一个强大版本的性能分析器，比Profiles还强大。可以跟踪事件，查看css样式，找到js中内存泄露，检测js语法。功能之强大，无出其右！Speed Tracer是一款很强大的网页性能分析工具，通过它你可以找到你的网页运行缓慢的原因。针对它们改善网站。不过因为它的功能强大，所以操作比较复杂。篇幅原因露珠不做介绍。感兴趣的同学可以自己去捉摸捉摸。下面是盗图一张：

结束语、

到此为止，露珠的Chrome开发者工具不完全指南系列宣告结束，露珠通过了六篇博文，向诸位比较想尽地介绍了chrome开发者工具的功能使用。从基础的dom查找到性能分析，大体上涵括了前端开发的各个方面。在如今前端开发日益复杂的趋势下，掌握了几件好的工具，是可以能够事半功倍的。而chrome毫无疑问的是这些好工具中的一个。讲到这里露珠想到《庄子》里面的一个故事：有一天孔子的学生子贡经过一块菜畦，看到有一位老者为了浇水而打了一条通向水井的地道，然后抱着水瓮来回于水井和菜畦之间，为的是给菜畦浇水。子贡见了就对老者说这样打水太累，为什么不自己做一个打水的机器呢？种菜的老人说：“有机械之事者必有机心。机心存与胸，大道不载也”。意思是有了偷懒的心，人就变得懒，这不是人的本性，也不是天的本性，所以大道也就不会充实他的心田。其实露珠想说运用工具和偷懒或机心是两回事儿，时代在变迁，人类早就不再是刀耕火种的人类了，如果一直停在旧的时代，跟不到新时代的进步，不学会与时俱进这样只有被历史淘汰。这跟我们现在处的环境是一样的，特别是前端开发，技术更新跟翻书一样快，隔三差五的新框架出现，几年的时间就有一大堆新鲜的东西跳将出来把你们吓一跳，不仅仅开发的时间在增加，学习的成本也在不停增加，所以时间变得尤其宝贵。如果有好的工具可以在少付出的情况下为我们达到同样的目的，何乐而不为呢？毕竟大家的目标都一样，只是殊途同归罢了。当然，庄子是道家人物，借个故事来调侃儒家也是理所当然，断章取义还是不行滴哈。