Firebug使用方法

1、各种标签的含义：

控制台：Javascript命令行操作，显示JS错误信息，提示信息，日志信息

HTML：显示页面的HTML原码

CSS：编辑页面的CSS原码

脚本：显示页面脚本和调试

DOM：显示页面对象和DOM属性

网络：显示页面下载和花费、时间

Cookies：显示页面请求的Cookies，及查看和修改

 

2、编辑HTML和CSS

在HTML和CSS框中分别编辑，就能在页面上实时显示出效果。

调节大小时（微调每次变化1px），可以使用上下方向键，

调节大小时（微调每次变化0.1px），可以使用ctrl+上下方向键，

调节大小时（每次变化10px），可以使用shift+上下方向键。

 

3、评估页面下载速度

在网络标签中可以看到各个模块的下载速度

 

4、XHR：Ajax监听

监听Ajax请求，可以检查每个请求是否被正确地接受和正确地返回以及返回的结果是否正确。

 

5、在控制台中输出信息

console.log(i);

console.info(i);

console.debug(i);

console.warn(i);

console.error(i);

这几种方式在控制台中显示的样式，背景色等都有所不同

 

6、占位符

%d 整数

%f 浮点数

%s 字符串

%o 对象

 

7、console.dir()命令可以显示一个对象的所以属性和方法

例如：console.dir(console)

console.time()可以在控制台中显示代码运行时间

例如：console.time(“test”);

          for(vari=0;i<1000000;i++){}

          console.timeEnd(“test”);

此代码运行时间大约是640ms

 

8、进阶提示

（1）点击所有可以点击的地方，尽可能多的尝试；

（2）点击鼠标右键，展开功能键；

（3）下拉菜单；

（4）官网下载插件，增加插件的扩展性。