1. 自動(dòng)斷點(diǎn)

有時(shí)候在執(zhí)行 JavaScript 代碼的時(shí)候，可能來(lái)不及設(shè)置斷點(diǎn)，代碼就被執(zhí)行了，其實(shí)可以通過(guò)在代碼中寫上 debugger(代碼中第 8 行)，讓代碼執(zhí)行到 debugger 的位置自動(dòng)暫停。

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

2. 手動(dòng)斷點(diǎn)

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

3. 打印調(diào)用堆棧

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

4. 以表格的方式打印對(duì)象

下面是一個(gè)對(duì)象，可以通過(guò) console.table( obj ) 來(lái)打印這個(gè)對(duì)象。

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é)果如圖所示：

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