Firebug——web调试工具

1.初步介绍

2.操作

2.1快捷键：

ctrl+F12——新标签页打开
ctrl+shift+c——查看页面元素

2.2XHR:

监听ajax请求（如搜索提示）当服务器发送post或get请求时，它会监听这些请求，并在下面罗列出来，其中的参数就是我们请求的url或者post中的一些名字和字符；头信息是我们请求和回应的头信息；响应是实际中从服务器接收到的信息。

2.3CSS属性值调整

可用方向键进行微调字体，
- 按住↑或↓，每次以1个单位调整。
- 按住Ctrl+↑或Ctrl+↓，每次以0.1个单位调整。
- 按照Shift+↑或Shift+↓，每次以10个单位调整。

3.Javascript控制台

3.1调试JS程序：

1)console.log(var name)
2)console.info()
3)console.debug()
4)console.warn()
5)console.error()//可看到出错位置，及相关调试信息

3.2控制台输入语句，可代码补全：如输入con+Tab键，可出现命令提示

3.3占位符输出：

如console.log(‘%d年%d月%d日’,2015,2,7);
可输出%d(整数)、%f(浮点数)、%s(字符串)、%o(对象)
作用：可以格式化日志输出

3.4日志信息分组：

console.group('第一组')；
console.log();...
console.groupEnd();//分组结束标志
console.group('第二组')；
console.log();...
console.groupEnd();//分组结束标志


3.5显示对象所有属性和方法：

如： console.dir(console);

3.6记录代码的运行时间：

如:
console.time("test");
for(var i=0; i<10000;i++){
}
cosole.timeEnd("test");


4.JS代码的调试：

脚本：可查看JS代码，对其设置断点（点击左侧行号即可）
方法：单步进入、单步退出、单步跳过、继续
执行到断点处，切换到监控栏，可改变断点中相应的变量
函数如何被调用：在代码处写入 console.trace();
概况栏：可进行简单的性能分析

5.进阶提示：

1.点击所有可以点击的地方（多尝试）
2.点击鼠标右键
3.下拉菜单
4.主菜单