Firebug的使用

调试

目录

JS课程合集跳转链接

firebug插件的控制台详解

一. 常用的命令

• console.log()
• console.info()
• console.debug()
• console.warn()
• console.error()

二. 类似Java中的占位符

用来美化(格式化)日志的输出

• %d : 整形
• %f : 浮点
• %s : 字符串
• %o : 对象

三.

• 分组功能
  console.group("分组名")
  console.groupEnd()

console.group("组1");
    console.log(01);
    console.log(02);
console.groupEnd();
console.group("组2");
    console.log(03);
    console.log(04);
console.groupEnd();

• 显示对象的说有属性和方法
  console.dir(对象)

console.dir(console);   // 显示console的属性和方法

• 测试函数运行时间
  console.time("变量名")
  console.timeEnd("变量名")

console.time("test");
    for(var i = 0; i < 100000; i++){
    }
console.timeEnd("test");
// 显示结果:  test : 639ms;

• 追踪函数
  console.trace()
  [ 注: ] 运行前点击"概况",运行后再点击"概况"就能分析调用情况了

function add(x){
   var sum = 0;
  if(x<=0){
   return sum = 0;
  }
  sum =x+add(x-1);
  console.trace(); // 追踪函数的迭代情况
  return sum;
}
add(5)

四. 调试

脚本：可查看JS代码，对其设置断点（点击左侧行号即可）
方法：单步进入、单步退出、单步跳过、继续
1. 执行到断点处，切换到监控栏，可改变断点中相应的变量
2. F5新后用上述四种方法
3. 在某个变量除选中右键添加监控可以右侧查看值的变化

五. 进阶提示

1. 点击所有鼠标能点击的地方
2. 能点击的地方点击右键
3. 下拉菜单
   eg. 在样式的下拉菜单可以查看hover等等状态
   eg. 还可以改变颜色值的显示方式
4. 点击"小甲虫"查看快捷键和帮助文档
5. firebug可安装扩展插件
   eg. Yslow(雅虎军规)