[零基础] 减少50%的bug，只需要30分钟...

Posted 2021-06-27 前端呆头鹅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[零基础] 减少50%的bug，只需要30分钟...相关的知识，希望对你有一定的参考价值。

文章目录

一打印 | console.log

console.log是大家经常使用的调试方式了，在代码中加入console.log就能在控制台打印出参数内容，可以用它来判断代码的执行情况和数据的即时信息。

const A = function(){
    let a = 1;
    if(a === 1){
        // 执行到 打印
        console.log('a===1',a)
    }else {
        // 未执行 不打印
        console.log('a!==1',a)
    }
}

A()

上文中的代码通过if创建了两个分支，我们可以通过console了解它的运行情况。

控制台如图打印出内容。

在这里插入图片描述

可以看到console打印的是if中的语句，而没有打印else中的语句，而且我们还打印出了该环境中a的值。

console中的参数会被依次打印出来，可以是任何类型的值，也可以是指向任何值的变量。

然后我们修改代码，使console打印引用类型。

const A = function(){
    let a = { num: 2 };
    console.log(a)
    a.num = 3;
    console.log(a)
}

A()

打开控制台，出现两个object，打开都是{ num:3 }，也就是代码执行完毕后a的值。

在这里插入图片描述

这是因为控制台实际只是取了a的地址，而不是记录了a的即时状态，所以要打印引用类型的值，可以通过将a转换为JSON串的方式。

const A = function(){
    let a = { num: 2 };
    console.log(JSON.stringify(a))
    a.num = 3;
    console.log(JSON.stringify(a))
}

A()

控制台会打印出a的快照。

在这里插入图片描述

示例中逻辑比较简单，开发中遇到的情况比较复杂，常常需要遇到判断代码流向和数据情况的时候，console.log就可以派上用场。

但是console只能打印当时的情况，当我们希望看到一个数据在代码中的动态变化时，就像是上面的代码中，我们打印了两次a的值来体现前后变化，真实的环境数据变化和代码流向和复杂的多，我们可以通过打断点的方式动态的观察。

二断点 | debugger

我们通过在代码中加入debugger来打断点。

在控制台打开的情况下，默认进行断点调试，程序运行到断点的位置就会停止。

const A = function(){
    let a = { num: 2 };
    console.log(JSON.stringify(a))
    debugger
    a.num = 3;
    console.log(JSON.stringify(a))
}

A()

在这里插入图片描述

代码停在了debugger的位置，并将当前函数中的变量状态标识出来，如果变量过长导致缩略展示，可以将鼠标放置到变量上方展示详细信息。

右方有几个按钮，可以利用它来调试。

在这里插入图片描述

其中最常用的是第一个和第三个，第一个是执行到下一个断点，第三个是执行到下一行。

我们点击第三个按钮到为a.num赋值成功的位置。

在这里插入图片描述

可以看到打印出来的值已经变了。

但是这样往往只能在本方法中实现调试，如果我们想知道这个函数的调用者，该怎么做呢？

三执行栈 | call stack

为了更加清楚的了解call stack调试的作用，我们修改代码。

const A = function(){
    let a = { num: 2 };
    console.log(JSON.stringify(a))
    debugger
    a.num = 3;
    console.log(JSON.stringify(a))
}
const B = function(){
    A();
}
const C = function(){
    B();
}
C()