在浏览器中调试JS代码

[ JS基础 ]

在浏览器中调试 JS 代码

在编写 JS 代码的时候，代码中可能会出现语法错误，或者逻辑错误，如果没有相应的调试工具来发现这些错误，是一件很痛苦的事情。

语法错误，最常见的蘑菇与标点符号错误，或者是关键字写错了。这些语法错误可以在浏览器开发者工具的console面板中查看。

例如：

<script>
    var a = 0；
    var b = a++;
</script>

上图中的错误提示意思就是代码中出现了语法错误！

逻辑错误值得是 JS 最终执行结果，和预期结果有差异，这种错误只靠眼睛往往是很难检查出来的。

在早期的页面开发工作中，调试 JS 代码，通常会使用alert()和console.log()方法来进行调试。比如在代码运行过程中，观察目标变量的值等操作。

<script>
    var sum = 0;
    for (var a = 1; a < 10; a++) {
        sum += a;
        alert(sum);
    }
    console.log(sum);
</script>

上面的案例中，可以通过每次循环过程中使用 alert 方法来观察 sum 值的变化。但问题是，这些弹窗太多了。每次都要手动点击，才能继续执行下去。

alert()方法会阻塞 JS 执行

所以跟多时候会使用console.log()方法调试 JS 代码。

<script>
    var sum = 0;
    for (var a = 1; a < 10; a++) {
        sum += a;
        console.log(sum);
    }
    console.log(sum);
</script>

现在大多数浏览器的开发者工具都为开发人员提供了“断点调试”的功能，也就是说在想要调试的位置加入一个断点，从该位置开始监控想要查看的变量，提高解决逻辑问题的效率。

断点调试功能在浏览器开发者工具的sources面板中：案例源码

在 JS 代码中插入debugger关键字，也可以实现插入断点的功能，执行到此位置时，浏览器会自动暂停执行。

<script>
    var sum = 0;
    debugger;
    for (var a = 1; a < 10; a++) {
        sum += a;
    }
    console.log(sum);
</script>