做為前端開發(fā)，寫Node.js 的代碼時(shí)候我很疑惑为鳄，這在調(diào)試代碼絕對(duì)不會(huì)是這樣笨拙裳仆，第一次都是通過console.log逐步推理調(diào)試代碼，后來想想肯定有類似谷歌調(diào)試工具一樣的工具幫助我們調(diào)試Node.js 的代碼孤钦，于是我查找資料歧斟，覺得這篇文章不錯(cuò)，既有通過前臺(tái)頁面的調(diào)試方式-（Chrome Devtools方式）偏形，也有無前臺(tái)頁面的調(diào)試-（VSCode方式）静袖。
有了這個(gè)調(diào)試方法，能讓你的代碼開發(fā)方便很多俊扭。話不多說队橙，往下看～
調(diào)試 Node.js 代碼
準(zhǔn)備一段簡(jiǎn)單的 Node.js 代碼用來調(diào)試：
const os = require('os');
function func(a, b) {
? return a + b;
}
console.log(func(1,2));
console.log(os.cpus());
它的邏輯就是執(zhí)行了一個(gè)加法，然后打印了 cpu 的核心的情況萨惑。
直接執(zhí)行是這樣的：
打印了 1 + 2 的結(jié)果捐康，也就是 3 ，也打印了 CPU 核心的情況庸蔼，8 核的 M1 芯片解总。
那怎么斷點(diǎn)調(diào)試呢？
執(zhí)行的時(shí)候加上一個(gè) --inspect 的參數(shù)姐仅，就會(huì)啟動(dòng)調(diào)試服務(wù)了：
指定 --inspect-brk 參數(shù)還會(huì)在首行斷住花枫。
可以看到啟動(dòng)了一個(gè) WebSocket 的服務(wù)端，這就是調(diào)試服務(wù)掏膏，用某個(gè)調(diào)試工具客戶端連上就行了：
調(diào)試客戶端可以是 Chrome Devtools 也可以是 VSCode劳翰。
Chrome Devtools
比如用 Chrome Devtools 來連上是這樣的：
打開 chrome://inspect 的 url 就會(huì)看到這個(gè)可以連接的 target：
點(diǎn)擊 inspect 就是連上這個(gè) ws 服務(wù)端來做調(diào)試：
右邊可以看到調(diào)用棧、上下文的變量壤追，可以單步執(zhí)行磕道、可以打斷點(diǎn)等。
打印信息會(huì)輸出在 console
VSCode
用 VSCode 調(diào)試的話需要在項(xiàng)目根目錄下加一個(gè) .vscode/launch.json 的文件行冰，類型選擇 attach to process：
很容易理解溺蕉，就是連接到目標(biāo)進(jìn)程的 ws 服務(wù)的意思：
端口是 9229，也就是我們調(diào)試服務(wù)啟動(dòng)的端口悼做。
然后點(diǎn)擊調(diào)試面板的調(diào)試按鈕來啟動(dòng)：
這樣也會(huì)在斷點(diǎn)處斷住疯特，可以單步運(yùn)行、可以看調(diào)用棧肛走、上下文的信息：
看到這里不知道有沒有同學(xué)會(huì)覺得這樣太麻煩了漓雅，每次都要起一個(gè) ws 調(diào)試服務(wù)，然后再 attach，不能把這兩步合并到一塊自動(dòng)給做了嗎邻吞？
沒錯(cuò)组题，確實(shí)可以合并到一塊，也就是起一個(gè) ws 服務(wù)抱冷，然后自動(dòng) attach 上：
調(diào)試配置選擇 launch program：
只需要指定要調(diào)試的 Node.js 模塊的地址崔列，然后點(diǎn)擊啟動(dòng)，這樣就可以調(diào)試了：
注意旺遮，想達(dá)到和 --inspect-brk 一樣的首行斷住的效果赵讯，這里要執(zhí)行 stopOnEntry 為 true。
效果是一樣的：
這樣比直接啟動(dòng) ws 調(diào)試服務(wù)耿眉，然后再 attach 還少了一步边翼。
