邪罗刹的菠萝阁

> 这个工具对小邪来说真算是个利器的呢，不信的话听小邪慢慢解说喔 O(∩_∩)O。
> 使用 Chrome 浏览器的时候，右键对着网页空白处或者目标元素点击。

> 然后选择“审核元素”那一项，即可启动 Chrome 的开发者利器，嘿嘿嘿。
> 先看下图中的界面，界面中条理清晰，很容易就可以理解网页的结构与代码形式。

1. 分析网页：

> 左侧可以很容易地理解网页的结构，而右边可以对元素进行具体的分析。
> 比如图中，左侧选择一个元素，而在右侧则清楚的表明其CSS属性来自何处。
> 这样如果想要修改一些CSS混杂的网页的话，完全不是问题了。

2. 分析元素范围：

> 同时它还提供了元素地范围标示图，如下图，当你鼠标指向利器中的某个元素时。
> 网页中相应的位置的元素就会被标示出来，同时如果你十分熟悉标示图的话。
> 一眼就能看出 Padding Margin Height 等等属性的范围与起到的作用。

3. 即时修改（亮点）：

> 然后，当我们把鼠标指向CSS分析框中时，就会出现如下图的一列复选框。
> 我们可以随时使用复选框取消某一属性的作用，即时进行调整。

> 仔细观察高亮的那一行代码，你会发现代码右边多出了点什么，那是我鼠标指上去的缘故。

> 然后双击它，这样就可以输入代码了喔，比如我们像下图一样输入 style="background:#fff;"。
> 然后猛击回车，代码的效果就会即时反应在网页上，嘎嘎，多么强大的利器哇！
> 当然咯，刷新一下效果就会还原为初始状态，这个时候根据你的修改再写入CSS文件就好咯。

> 而且还可以像下图一样去修改右侧的CSS呢，右侧修改的话是根据选择器生效的喔。

> 这里完全消灭了以前编辑CSS然后保存再刷新网页的这个辛苦的过程。
> 呵呵，当然你使用 Top Style 等等软件也行，不过这类软件一般只支持IE内核吧。

4. 素材罗列：

> 同时利器顶部有个叫 Resources 的选项，点进去就可以清晰地看到每个素材。
> 呵呵，如果你对某个网页怀有好奇心的话，不妨打开利器来看看，搜刮一番。
> 哇卡卡卡卡。然后左侧还有 Time 和 Size 的选项，可以分析元素载入耗时和素材大小。

5. Cookies 查看：

> 这里清楚地罗列了在此网站保存的 Cookies，可以随意分析喔。
> 嘎嘎，有一列是 Value，小邪就给藏起来了。

6. 代码错误提醒：

> 顶部的 Console 选项点进去就会出现一个列表。
> 里面显示的是浏览器解析时候遇到的问题和处理问题的建议。

7. 欢迎来 Follow 我的 Twitter @AngelSolo

> 嘿嘿嘿，让你的网站代码越来越完美吧，到时候牛X了一定要叫小邪去围观喔。
> 小邪最喜欢截图留念了，O(∩_∩)O 哇卡卡卡卡！（偶的笑声升级了）