Firebug调试js代码

博客搬家了，欢迎你们关注，https://bobjin.com

Firebug功能异常强大，不只能够调试DOM,CSS，还能够调试JS代码，下面介绍一下调试JS。

一、认识console对象

　　console对象是Firebug内置的对象，该对象能够在代码中写入，能够在控制面板中写入。

1）有五个方法来显示信息。依次为：

　　一、console.log()，能够用来取代alert()或document.write()

　　二、console.info()，通常信息

　　三、console.debug()，除错信息

　　四、console.warn()，警告提示

　　五、console.error()，错误提示

2）常常用的几个方法：

　　一、console.group()和console.groupEnd()，用于分组显示信息，如：

　　　  console.group("第一组信息");

     　　console.log("第一组第一条");

    　　 console.log("第一组第二条");

     　　console.groupEnd();

     　　console.group("第二组信息");

    　　 console.log("第二组第一条");

    　　 console.log("第二组第二条");

    　　 console.groupEnd();

　　二、console.dir()能够显示一个对象全部的属性和方法。

      三、console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。好比,先获取一个表格节点,

     　　　　var table = document.getElementById("table1");

   　　  而后,显示该节点包含的代码。

    　　       console.dirxml(table);

　　 四、console.assert()用来判断一个表达式或变量是否为真。若是结果为否,则在控制台输出一条相应信息,而且抛出一个异常。

 　　五、console.trace()用来追踪函数的调用轨迹。 若是想知道这个函数是如何被调用的,只需在该函数体中加入console.trace()方法就能够了。

　　 六、console.time()和console.timeEnd(),用来显示代码的运行时间。如： 

　　　   console.time("计时器一");

    　　  for(var i=0;i<1000;i++){

    　　  for(var j=0;j<1000;j++){}

    　　  }

    　　  console.timeEnd("计时器一");

　　七、console.profile()和console.profileEnd(),分析程序各个部分的运行时间,找出瓶颈所在。

二、认识控制面板

　　如图所示为firebug的控制面板，左边为信息显示区域，右边为js代码调试区域，代码编辑完以后，能够点击运行，便可在坐左边显示出来。

三、js代码断点调试

　　先来认识控制面板，左边为代码区域，右边为监测区域，能够在行号前面单击添加断点，再单击取消断点，F8为继续调试，F10为单步跳过，F11为单步进入，shift+F11为单步跳出。

博客搬家了，欢迎你们关注，https://bobjin.com