firebug在js调试中的log功能列举_firebug的调试日志命令-优快云博客

凡是写js或者进行前端开发的人员对firebug都不陌生，firebug在js的调试中功不可没。总的说来，用firebug调试js包括以下几个部分：

1、检查常规错误：这个就是运行js之后，如果有错误的话在ff（或者在使用firebug lite的其他浏览器）右下角就会有相应的提示，最常见的就是一个表示错误的“X”图标，具体就不赘述的，大家都懂；

2、完善的log功能：就是创建了一个console的对象（window.console），它有一些强大的方法帮助我们调试js，详细见下文；

3、控制台的命令行功能：打开firebug的“控制台”面板，在最低端“>>>”符号之后即可输入相应的js代码进行调试，还可以单击右下角的三角按钮展开输入面板已输入多行代码，此时提供了一些命令行便捷方法，比如用$()替代document.getElementById()方法等，更多可以google；

4、断点、单步执行和变量信息：打开firebug的“脚本”面板，可以设定调试时的断点（条件断点）、单步调试（单步进入、单步跳过、但不跳出等），具体打开一看便知。

接下来的代码详细展示firebug的log功能：

View Code

 
 
  
  //
  
  console.log的使用
  
  
//
  
  console.log提供了控制台中输出信息的方法
  
  

  
  
console.log(
  
  '
  
  Message start:
  
  '
  
  );
  
  //
  
  Message start:
  
  

  
  var
  
   number 
  
  =
  
   
  
  123.123
  
  ;

  
  var
  
   
  
  int
  
   
  
  =
  
   
  
  10
  
  ;

  
  var
  
   string 
  
  =
  
   
  
  '
  
  234
  
  '
  
  ;

  
  var
  
   object 
  
  =
  
   {
  
  '
  
  name
  
  '
  
  : 
  
  '
  
  chemdemo
  
  '
  
  , 
  
  '
  
  sex
  
  '
  
  : 
  
  '
  
  mail
  
  '
  
  };
console.log(
  
  '
  
  number=
  
  '
  
  , number);
  
  //
  
  number= 123.123
  
  

  
  console.log(
  
  '
  
  number=%f
  
  '
  
  , number);
  
  //
  
  number= 123.123
  
  

  
  console.log(
  
  '
  
  int=%d
  
  '
  
  , 
  
  int
  
  );
  
  //
  
  int=10
  
  

  
  console.log(
  
  '
  
  string=%s
  
  '
  
  , string);
  
  //
  
  string=234
  
  

  
  console.log(
  
  '
  
  object=%o
  
  '
  
  , object);
  
  //
  
  object=Object { name="chemdemo", sex="mail"}
  
  

  
  console.log(
  
  '
  
  number=%f, int=%d, string=%s, object=%o
  
  '
  
  , number, 
  
  int
  
  , string, object);

  
  //
  
  number=123.123, int=10, string=234, object=Object { name="chemdemo", sex="mail"}
  
  

  
  console.log(
  
  '
  
  Message end!
  
  '
  
  );
  
  //
  
  Message end!
  
  

  
  


  
  //
  
  console.info
  
  
//
  
  会在输出到firebug控制台的信息前面加上一个表示注意信息的小图标
  
  

  
  function
  
   func(a, b) {
    
  
  return
  
   a 
  
  +
  
   b;
}

window.onload 
  
  =
  
   
  
  function
  
  () {
    
  
  var
  
   object 
  
  =
  
   {name: 
  
  '
  
  chemdemo
  
  '
  
  , sex: 
  
  '
  
  mail
  
  '
  
  };
    
  
  var
  
   number 
  
  =
  
   
  
  12
  
  ;
    
  
  var
  
   string 
  
  =
  
   
  
  '
  
  123
  
  '
  
  ;
    
  
  var
  
   array 
  
  =
  
   [
  
  123
  
  , 
  
  34
  
  , object, number, string];
    
  
  var
  
   node 
  
  =
  
   document.getElementById(
  
  '
  
  node
  
  '
  
  );

    console.info(object);
    console.info(number);
    console.info(string);
    console.info(array);
    console.info(func);
    console.info(node);
    console.info(window);
    console.info(document);
    console.info(screen);
    console.info(navigator);
}


  
  //
  
  console.warn
  
  
//
  
  会在输出到firebug控制台的信息前面加上一个表示警告的小图标
  
  

  
  function
  
   func(a, b) {
    
  
  return
  
   a 
  
  +
  
   b;
}

window.onload 
  
  =
  
   
  
  function
  
  () {
    
  
  var
  
   object 
  
  =
  
   {name: 
  
  '
  
  chemdemo
  
  '
  
  , sex: 
  
  '
  
  mail
  
  '
  
  };
    
  
  var
  
   number 
  
  =
  
   
  
  12
  
  ;
    
  
  var
  
   string 
  
  =
  
   
  
  '
  
  123
  
  '
  
  ;
    
  
  var
  
   array 
  
  =
  
   [
  
  123
  
  , 
  
  34
  
  , object, number, string];
    
  
  var
  
   node 
  
  =
  
   document.getElementById(
  
  '
  
  node
  
  '
  
  );

    console.warn(object);
    console.warn(number);
    console.warn(string);
    console.warn(array);
    console.warn(func);
    console.warn(node);
    console.warn(window);
    console.warn(document);
    console.warn(screen);
    console.warn(navigator);
}


  
  //
  
  console.error
  
  
//
  
  功能同上，会在输出到firebug控制台的信息前面加上一个表示错误的小图标
  
  

  
  

  
  //
  
  console.assert
  
  
//
  
  可以进行断言，接受一个表达式作为参数,当表达式的值为true时，不输出任何信息，为false时，输出一条表示断言失败的错误信息
  
  
//
  
  console.assert还可以接受更多的参数，一次作为断言失败时显示的信息
  
  

  
  function
  
   func(a, b) {
    console.assert(
  
  typeof
  
   a 
  
  ==
  
   
  
  '
  
  string
  
  '
  
  , 
  
  '
  
  arguments a is not a string!
  
  '
  
  );
    console.assert(
  
  typeof
  
   b 
  
  ==
  
   
  
  '
  
  number
  
  '
  
  , 
  
  '
  
  arguments b is not a number!
  
  '
  
  );
    
  
  //
  
  dosomething
  
  

  
  }

console.log(
  
  "
  
  func('123', 1)
  
  "
  
  );
  
  //
  
  func('123', 1)
  
  

  
  func(
  
  '
  
  123
  
  '
  
  , 
  
  1
  
  );
console.log(
  
  "
  
  func('123', 1)
  
  "
  
  );
  
  //
  
  func('123', 1)
  
  

  
  func(
  
  123
  
  , 
  
  1
  
  );
  
  //
  
  arguments a is not a string!
  
  

  
  console.log(
  
  "
  
  func(new Object(), '123')
  
  "
  
  );
  
  //
  
  func(new Object(), '123')
  
  

  
  func(
  
  new
  
   Object(), 
  
  '
  
  123
  
  '
  
  );
  
  //
  
  arguments a is not a string!
  
  
//
  
  arguments b is not a string!
  
  

  
  console.log(
  
  "
  
  func('css', [])
  
  "
  
  );
  
  //
  
  func('css', [])
  
  

  
  func(
  
  '
  
  css
  
  '
  
  , []);
  
  //
  
  arguments b is not a number!
  
  

  
  


  
  //
  
  console.dir
  
  
//
  
  可以将对象或HTML元素的详细信息输出到firebug中，就像在DOM查看器中查看一样
  
  

  
  window.onload 
  
  =
  
   
  
  function
  
  () {
    
  
  var
  
   object 
  
  =
  
   {
        a: 
  
  '
  
  123
  
  '
  
  ,
        b: 
  
  44
  
  ,
        c: 
  
  null
  
  ,
        d: 
  
  function
  
  () {}
    };
    console.log(
  
  '
  
  object information:
  
  '
  
  );
    console.dir(object);
    console.log(
  
  '
  
  node information:
  
  '
  
  );
    console.dir(document.getElementById(
  
  '
  
  node
  
  '
  
  ));
}


  
  //
  
  console.dirxml
  
  
//
  
  可以将HTML或XML节点元素的源代码输出到控制台中，就如同在HTML查看器中查看一样
  
  

  
  window.onload 
  
  =
  
   
  
  function
  
  () {
    console.log(
  
  '
  
  node:div
  
  '
  
  );
    console.dirxml(document.getElementById(
  
  '
  
  node
  
  '
  
  ));
  
  //
  
  返回div节点（outerHTML）
  
  

  
      console.log(
  
  '
  
  node.body
  
  '
  
  );
    console.dirxml(document.body);
  
  //
  
  返回body标签及其子节点（outerHTML）
  
  

  
  }


  
  //
  
  console.trace
  
  
//
  
  在函数或方法中添加此语句，可以在firebug的控制台中输出函数被调用的信息及调用该函数的函数或方法
  
  

  
  function
  
   func(a, b, c) {
    console.trace();
}

  
  function
  
   test_a() {
    func();
  
  //
  
  func(a=undefined, b=undefined, c=undefined)
  
  

  
  }

  
  function
  
   test_b() {
    func(
  
  1
  
  , 
  
  2
  
  , 
  
  3
  
  );
  
  //
  
  func(a=1, b=2, c=3)
  
  

  
  }

  
  var
  
   test_c 
  
  =
  
   
  
  function
  
  () {
    func(
  
  '
  
  parameter
  
  '
  
  , {a: 
  
  1
  
  , b: 
  
  2
  
  , c: 
  
  3
  
  });
  
  //
  
  func(a='parameter', b={a: 1, b: 2, c: 3}, c=undefined)
  
  

  
  }
test_a();
test_b();
test_c();
(
  
  function
  
  () {
    func(
  
  '
  
  special
  
  '
  
  );
  
  //
  
  func(a=special, b=undefined, c=undefined)
  
  

  
  })();


  
  //
  
  console.group,console.groupEnd
  
  
//
  
  给输出的log信息分组
  
  
//
  
  console.group标识一个分组开始，接受一个或多个参数作为该分组的名称或者提示语
  
  
//
  
  console.groupEnd标识一个分组结束
  
  

  
  console.group(
  
  '
  
  G a
  
  '
  
  );
console.log(
  
  '
  
  information
  
  '
  
  );
console.info(
  
  '
  
  information
  
  '
  
  );
console.warn(
  
  '
  
  information
  
  '
  
  );
console.error(
  
  '
  
  information
  
  '
  
  );
console.groupEnd();

console.group(
  
  '
  
  G b
  
  '
  
  );
console.log(
  
  '
  
  information
  
  '
  
  );
console.info(
  
  '
  
  information
  
  '
  
  );
console.warn(
  
  '
  
  information
  
  '
  
  );
console.error(
  
  '
  
  information
  
  '
  
  );
console.groupEnd();



  
  //
  
  console.time,console.timeEnd
  
  
//
  
  将他们添加到一段代码的开头和结尾，可以计算并输出执行这段代码所用时间，以毫秒记
  
  
//
  
  console.time接受一个字符串参数作为这个计算器的名字，在遇到一个同样字符串作为参数的console.timeEnd时就停止计时名输出时间
  
  

  
  var
  
   sum 
  
  =
  
   
  
  0
  
  ;
console.time(
  
  '
  
  sum
  
  '
  
  );

  
  for
  
  (
  
  var
  
   i
  
  =
  
  0
  
  ; i
  
  <
  
  10000
  
  ; i
  
  ++
  
  ) {
    sum 
  
  +=
  
   i;
}
console.timeEnd(
  
  '
  
  sum
  
  '
  
  );
  
  //
  
  2ms
  
  

  
  


  
  //
  
  console.profile,console.profileEnd
  
  
//
  
  与console.time,console.timeEnd相似，它们输出的是对所包含代码段的性能测试数据
  
  

  
  function
  
   sum() {
    
  
  var
  
   sum 
  
  =
  
   
  
  0
  
  ;
    
  
  for
  
  (
  
  var
  
   i
  
  =
  
  0
  
  ; i
  
  <
  
  10000
  
  ; i
  
  ++
  
  ) {
        sum 
  
  +=
  
   i;
    }
    console.log(sum);
}
console.profile(
  
  '
  
  sum
  
  '
  
  );
sum();
sum();
sum();
sum();
sum();
console.profileEnd(
  
  "
  
  sum
  
  "
  
  );


  
  //
  
  console.count
  
  
//
  
  可以统计其自身被执行的次数，它接受一个字符串参数作为输出到控制台的信息的标题
  
  
//
  
  一般用console.count放入到函数或者方法中来查看某个函数或者方法被调用的次数
  
  

  
  var
  
   num 
  
  =
  
   
  
  0
  
  ;

  
  function
  
   funcA() {
    num 
  
  ++
  
  ;
    console.count(
  
  '
  
  funcA
  
  '
  
  );
  
  //
  
  funcA n(n表示funcA被调用的次数)
  
  

  
      
  
  if
  
  (num 
  
  %
  
   
  
  2
  
   
  
  ==
  
   
  
  0
  
  ) {
        funcB();
    }
}

  
  function
  
   funcB() {
    console.count(
  
  '
  
  funcB
  
  '
  
  );
  
  //
  
  funcB n(n表示funcB被调用的次数)
  
  

  
  }
windaow.setInterval(funcA, 
  
  500
  
  );