js调试方法总结

好的调试方法会大大提高debug的速率。在js中，开发人员调试时最常用的方式即为console.log，但是不免存在局限性。
接下来总结几种常用的调试方法：

• alert
  alert是比较常用的debug方式，但是alert最大的局限性–只能打印字符串。如果显示内容不为字符串，alert会调用toString（）方法将该对象转化为字符串（eg：[object object],其具体内容并不会显示出来。其次,alert会阻塞ui及js的执行，只有在开发人员点击ok按钮才能继续，十分低效。

• console.log
  

• debugger
  一般情况下，在浏览器控制台直接打断点较为麻烦，我们可以通过使用debugger设置断点。一旦在代码中加入这行语句，chrome在执行的时候会自动在该行停下来。

  function potentiallyBuggyCode() {
   debugger;
    // do potentially buggy stuff to examine, step through, etc.
    }
  

• console.dir
  使对象以文件树的形式显示
  

• console.table
  若对象属性较多时，console.log打印出来的时候需要将对象一个一个展开查看，很麻烦。但是使用console.table可以使对象属性按照表格排列，让对象更好的呈现。
  

• console.time
  查看当前代码段运行时间
  

  • 压缩代码还原
    

• console.trace
  显示当前执行的代码在堆栈中的调用路径。

function doTask(){
    doSubTask(1000,10000);
}
 
function doSubTask(countX,countY){
    for(var i=0;i<countX;i++){
        for(var j=0;j<countY;j++){} 
    }
    console.trace();
}
doTask();

• console.profile
  查看当前代码段性能
  
  打开控制台会发现无JavaScript Profiler项，打开方式： 三个点菜单（控制台右上角）⋮ - >更多工具 - > JavaScript Profiler打开它。