1. 自動斷點

有時候在執(zhí)行 JavaScript 代碼的時候，可能來不及設置斷點，代碼就被執(zhí)行了，其實可以通過在代碼中寫上 debugger(代碼中第 8 行)，讓代碼執(zhí)行到 debugger 的位置自動暫停。

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

2. 手動斷點

斷點是程序員調試代碼時非常好用的利器，通過斷點調試可以看到當前執(zhí)行環(huán)境中各個變量的值，以及調用堆棧，通過單步執(zhí)行來查看各個步驟下代碼的運行狀態(tài)。如圖所示(Chrome 調試面板 -> sources -> 點擊代碼行號即可添加斷點)：

3. 打印調用堆棧

可以通過調試面板查看當前代碼的調用堆棧，也可以通過 console.trace() 打印函數(shù)調用堆棧，下面代碼第 13 行。

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); 

打印結果如圖所示：

本節(jié)課程主要介紹幾個調試 JavaScript 的技巧，這幾個技巧在工作中比較有用，需要重點掌握。