firebug是一款firefox下插件

作用：所见即所得，可以查看编辑html代码，CSS调试，JS调试，网络状况调试，可直接修改马上看到效果！

下载和安装：
一般到官网或FF的附加组件索安装（一般没有代理会下载失败）
官方网站：http://www.getfirebug.com
我的安装方法：baidu搜索下载，解压后加打开安装（在附加组件面板点搜索框旁下拉箭头里有个“从文件安装附加组件”，浏览到解压的组件，以xpi为后缀）

使用方法：
可按F12调出来，也可用鼠标左键点右上角的插件按钮
第一行有，firebug选项，点击查看页面中的元素按钮，控制台，HTML，CSS，脚本，DOM，网络，
最小化firebug，将firebug嵌入浏览器窗口（可嵌入到浏览器下部），对于当前网站停用firebug

1.点击查看页面中的元素按钮，在页面点击一块区域，就可以在编辑这块的代码，编辑后马上就可以在页面看到效果
2.在html代码中点击一个div就可以在右边看到这个DIV的代码
3.在CSS标签可以直接编辑CSS代码，修改后可在页面马上看到效果。可在右边的样式，布局，计算出的样式，DOM，事件
4.点网络标签，再到页面上刷新一下就可以看到页面上各项的加载时间，多少毫秒，看到那项加载的速度最慢再处理。
5.在有脚本的页面点“脚本”标签，可进行JS调试，可以左边单击设置断点，再单击取消断点，F10调试 ，右边可看到效果
还有个格式化标签

新版Firebug 2.0.16使用说明
一、新版可调出两个调试窗口，一个查看器窗口，一个控制台窗口
二、firebug查看器窗口
调出方法：网页任意元素右击——查看元素，
包括的选项卡：选择元素的箭头，查看器，控制台，调试器，样式编辑器，性能，网络选择卡
 1. 点左上的箭头，再把鼠标移动页面任意元素上单击，可在查看器中看到该元素的各种信息，包括宽，高，代码，盒模型
 2. 查看器选项卡：可看查看该元素的html代码，及动态style代码，以及直接在这里编辑可看到实进效果
    //注1：点左边div时，右边可查看该div的CSS样式代码(包括属于那个CSS文件)，盒模型，字体，动画等
    //注2：还有该选项卡的二级菜单，有该元素是上一级，下一级元素是什么，可以分别点每级元素在右边查看其CSS规则和盒模型
 3.  控制台选项卡：刷新一下页面可显示该页面关于网络，css，js，安全，日志，服务器等各种警告信息，最后清空是清除这些信息
 4.  调试器选择卡：查看该页面调用的所有JS文件，并可在右边窗口设置断点
 5.  样式编辑器选项卡，在这里可以查看该页面调用的所有CSS样式文件，可以编辑任意文件在任意代码，修改所见即所得，还可以保存在CSS文件去
 6.  性能选项卡：主要用于测试各文件加载速度，刷新一下页面看结果，较慢

三、firebug的控制台窗口
调出方法：按F12，网页右击——使用firebug查看元素，浏览器右上点firebug图标
包括的选项卡：，firebug的选项，选择元素箭头，前进，后退，显示命令行，控制台，html，CSS，脚本，DOM，网络，Cookies
1. 选项里的，firebug的设置
2. 箭头，用以在页面定义元素
3. 前进，后退，主要是跳到firebug的上一个界面与下一个界面
4. 控制台，它还有二级菜单，一般在二级菜单中选全部，主要用来显示页面加载时出现的各种错误，警告，消息，调试信息，cookies等
5. html：同查看器窗口的查看器选项卡，点左边相应元素，右边显示该元素的样式，布局，DOM，事件
    1) 它也有二级菜单用于选择当前元素上一级，下一级DIV，右边显示该级元素的样式，布局，DOM，事件
    2) 它比查看器窗口的查看器选项卡功能强大，除能查看样式和布局外还能查看所先元素的DOM和事件
6. CSS：在它的二级菜单可选择该页面加载的任意一个CSS文件编辑
7. 脚本：可在它的二级菜单选择该页面加载的任意一个JS文件编辑，还有格式化代码等其它选项
8. DOM：可查看到该页面的甩DOM项
9. 网络：。。。。。。。。。。。