调试 JavaScript 少不了这几个技巧

1.自动断点

有时候在执行 JavaScript 代码的时候，可能来不及设置断点，代码就被执行了，其实可以通过在代码中写上 debugger（代码中第 8 行），让代码执行到 debugger 的位置自动暂停。

function a() {
    console.log('enter a');
    b();
}


function b() {
    console.log('enter b');
    debugger;
    c();
}


function c() {
    console.log('enter c');
}


a();

2.手动断点

断点是程序员调试代码时非常好用的利器，通过断点调试可以看到当前执行环境中各个变量的值，以及调用堆栈，通过单步执行来查看各个步骤下代码的运行状态。如图所示（Chrome 调试面板 -> sources -> 点击代码行号即可添加断点）：

3.打印调用堆栈

可以通过调试面板查看当前代码的调用堆栈，也可以通过 console.trace() 打印函数调用堆栈，下面代码第 13 行。

function a() {
    console.log('enter a');
    b();
}


function b() {
    console.log('enter b');
    c();
}


function c() {
    console.log('enter c');
    console.trace();
}


a();

4.以表格的方式打印对象

下面是一个对象，可以通过 console.table( obj ) 来打印这个对象。

let pkg = {
    "name": "mini_tools",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "jquery": "^1.12.4"
    },
    "devDependencies": {},
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
};


console.table(pkg);

打印结果如图所示：

本节课程主要介绍几个调试 JavaScript 的技巧，这几个技巧在工作中比较有用，需要重点掌握。

---

推荐阅读：

让 JavaScript 文件代码相互独立
看透变量提升与块级作用域实现的原理
执行上下文与调用栈
用故事说透 JavaScript 中的原型