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打开它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值