firebug

firebug是用于浏览器中的扩展工具，中具有一整套完整而强大的web开发工具，能够为web开发人员从各个不同的角度剖析web页面内部的细节层面，为用户带来极大的开发调试方便，安装了改插件之后，同时该插件还是开源的，多种功能于一身，是开发人员必备扩展之一。

firebug简介

是 firefox 下的一个扩展工具,能够调试所有网站语言，如Html,Css等，但吸引人的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。不仅支持火狐浏览器，还支持IE，Opera和Safari浏览器，用户可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控，非常方便。

亮点介绍

1、控制台(Console)功能

控制台得主要作用是用来显示网页各类错误信息，并可对日志进行打印处理。同时可以在进行javascript调试的时候当作命令行窗口使用，并通过概况子选项说明javascript代码执行的相关信息。

2、HTML功能

此菜单标签功能，主要用于查看当前页面的源代码功能，并可进行编辑，实时显示，从而实现页面最佳效果。

3、脚本(Javascript)功能

脚本功能主要是一个脚本调试器，可以进行单步调试、断点设置、变量查看等功能，同时通过右边的监控功能来实现脚本运行时间的查看和统计，提高运行效率。

特色介绍

1、DOM功能：该功能主要用于查看页面DOM信息，通过提供的搜索功能实现DOM的快速准确定位，并可双击来实现DOM节点属性或值的修改。

2、网络(Net)功能

该标签功能主要用来监控网页各组成元素的运行时间的信息，方便找出其中运行时间较慢的部分，进一步优化运行效率。

3、CSS功能

点击CSS菜单标签，可查看所有的CSS定义信息，同时也可以通过双击来达到修改页面样式的效果。

教程介绍

如何使用谷歌chrome浏览器上的 (以chrome8为例)：

1、首先点击“设置”图标(关闭按钮下面的)，找到“工具”，点击其中的“扩展程序”菜单项。出现的页面上点击“获得更多扩展程序 >>”(看完后也可以忽略前二步)

2、新开的页面是谷歌浏览器扩展下载官网，在搜索中输入该工具，你就可以找到这个扩展工具，然后点击链接后在点击“安装”。

3、安装完毕，在设置按钮旁边会有一只虫子的图标，这个就是该工具了。

4、这个时候图标是灰色的，说明它没有生效，你只要打开一个新的网页，然后点击图标，让其变为彩色。最后在页面上打开右键菜单，选择“审查元素”就可以了。

运行后，网页和该工具会各自占用半个屏幕，你只要点击左下角(也就是浏览器左下角)的放大镜图案，然后鼠标移到你要观察的网页元素上面，再点击左键就可以开始研究html和css代码了。