Node 除錯利器,前端、Node 開發必備 - VSCode JS Debug Terminal

嘿嘿不務正業發表於2023-05-15

經常看到有同學抱怨 Node 除錯麻煩或者是搞不清怎麼除錯各種指令碼、JestWebpack 等等,而偶爾看到的除錯相關的文章又全都是在寫 inspectlaunch.json 這些方案,其實有一定學習成本。

而其實在 VSCode 中早已內建了相當無腦的 Debug 方式,就是 JavaScript Debug Terminal,利用它我們只需要負責打斷點,別的什麼 inspectlaunch.json 都不需要關注,主打的就是一個無腦、簡單。

使用

要啟用 JavaScript Debug Terminal 過程實在是太無腦了,不過還是說一下吧,要開啟只需要一步:在 Terminal 中新開一個 JavaScript Debug Terminal,然後所有的指令碼全都用它來啟動即可。

picture 1

實戰測試

空口無憑,下面我們透過幾個案例來測試一下有多好用。

node 指令碼

首先我們建立一個 test.js 指令碼,然後在需要除錯的行數前方點選新增上斷點,並進入 Debug Terminal 透過 node test.js 來執行。

picture 2

可以看到執行後直接就開啟了 VSCodedebug 模式,並且成功在斷點出停住。

npm script

再來試試 npm script 方式,我們先新建一個 package.json,然後在 scripts 中新增一條:"start": "node test.js",隨後在 Debug Terminal 執行 npm run start

picture 3

注意這次我們使用的是 debugger 來新增斷點,可以發現同樣成功進入斷點。

typescript debug

不止於此,我們再試試 typescript,新建一個 test.ts,然後透過 npx tsx test.ts 啟動。

picture 4

可以發現 typescript 一樣可以成功除錯。

webpack

上面都屬於比較簡單的場景,實際場景我們可能經常會在打包或寫單測時遇到一些問題需要除錯。現在我們先來隨便找個 webpack 模版試試 webpack

picture 5

可以看到在 webpack 原始碼中打斷點同樣也可以支援。

jest

再來試試 jest,隨便拿 react 原始碼裡的單測跑一下。

picture 6

不出所料,毫無問題。

其他方式

除了上面說的主動開啟 Debug Terminal 的方式進行除錯外,VSCode 還在 npm script 中整合了一些操作。

比如在 package.json 中的 scripts 上方的 Debug 按鈕,點選後會讓你選擇專案中的 script 並啟動 Debug Terminal 進行除錯。

picture 7

也可以在某個 script 的名字上 hover 後點選出現的懸浮按鈕中的 Debug 直接除錯對應的 script

picture 8

總結

可以看出 VSCodeJS Debug Terminal 基本支援了所有我們常用的除錯場景,無論是 nodetypescriptwebpack 還是 jest,全部拿捏。並且使用絕對無腦,可以放心食用。

當然在使用過程中也遇到一些小問題,比如在跑 jest 時由於會啟動多個子程式此時點選斷點工具條中的斷開可能會導致 Debug Terminal 後續失效,也有時會卡住。不過瑕不掩瑜,用了就知道 JS Debug Terminal 真香。

相關文章