經常看到有同學抱怨 Node 除錯麻煩或者是搞不清怎么除錯各種腳本、Jest、Webpack 等等，而偶爾看到的除錯相關的文章又全都是在寫 inspect、launch.json 這些方案，其實有一定學習成本，
而其實在 VSCode 中早已內置了相當無腦的 Debug 方式，就是 JavaScript Debug Terminal，利用它我們只需要負責打斷點，別的什么 inspect、launch.json 都不需要關注，主打的就是一個無腦、簡單，
使用
要啟用 JavaScript Debug Terminal 程序實在是太無腦了，不過還是說一下吧，要開啟只需要一步：在 Terminal 中新開一個 JavaScript Debug Terminal，然后所有的腳本全都用它來啟動即可，
實戰測驗
空口無憑，下面我們通過幾個案例來測驗一下有多好用，
node 腳本
首先我們創建一個 test.js 腳本，然后在需要除錯的行數前方點擊添加上斷點，并進入 Debug Terminal 通過 node test.js 來執行，
可以看到執行后直接就開啟了 VSCode 的 debug 模式，并且成功在斷點出停住，
npm script
再來試試 npm script 方式，我們先新建一個 package.json，然后在 scripts 中添加一條："start": "node test.js"，隨后在 Debug Terminal 執行 npm run start，
注意這次我們使用的是 debugger 來添加斷點，可以發現同樣成功進入斷點，
typescript debug
不止于此，我們再試試 typescript，新建一個 test.ts，然后通過 npx tsx test.ts 啟動，
可以發現 typescript 一樣可以成功除錯，
webpack
上面都屬于比較簡單的場景，實際場景我們可能經常會在打包或寫單測時遇到一些問題需要除錯，現在我們先來隨便找個 webpack 模版試試 webpack，
可以看到在 webpack 原始碼中打斷點同樣也可以支持，
jest
再來試試 jest，隨便拿 react 原始碼里的單測跑一下，
不出所料，毫無問題，
其他方式
除了上面說的主動打開 Debug Terminal 的方式進行除錯外，VSCode 還在 npm script 中集成了一些操作，
比如在 package.json 中的 scripts 上方的 Debug 按鈕，點擊后會讓你選擇專案中的 script 并啟動 Debug Terminal 進行除錯，
也可以在某個 script 的名字上 hover 后點擊出現的懸浮按鈕中的 Debug 直接除錯對應的 script，
總結
可以看出 VSCode 的 JS Debug Terminal 基本支持了所有我們常用的除錯場景，無論是 node、typescript、webpack 還是 jest，全部拿捏，并且使用絕對無腦，可以放心食用，
當然在使用程序中也遇到一些小問題，比如在跑 jest 時由于會啟動多個子行程此時點擊斷點工具條中的斷開可能會導致 Debug Terminal 后續失效，也有時會卡住，不過瑕不掩瑜，用了就知道 JS Debug Terminal 真香，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552559.html
標籤：其他
上一篇：記錄--css水滴登錄界面
下一篇：返回列表