引言

作為前端工程師經常打交道的開發工具無非 IDE 編輯器 和 Chrome，在 Chrome 中除錯是非常方便的，直接在 開發者工具的 source 欄打斷點就可以了。那麼，如果遇到需要寫 node 相關的程式碼，比如 webpack 配置項，應該怎麼除錯來實現我們的需求呢？

VS Code 配置

在 VS Code 中單獨有 debug 的選單，需要指定 launch.json 檔案，該檔案為 VS Code 提供啟動除錯所需的各項配置。

// launch.json
// 使用 IntelliSense 瞭解相關屬性。
// 懸停以檢視現有屬性的描述。
// 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387

{
 "version": "0.2.0","configurations": [
  {
   "type": "node","request": "launch","name": "Launch via NPM","runtimeExecutable": "npm","runtimeArgs": ["run-script","debug"],"cwd": "${workspaceFolder}/envloader/mobile","port": 9229
  }
 ]
}

上面是我們專案的除錯配置， runtimeExecutable 指明除錯方式是 npm 方式， runtimeArgs 為執行除錯傳的引數， cwd 指定工作目錄。

// package.json

"scripts": {
  "debug": "node --max_old_space_size=12288 --inspect-brk node_modules/webpack/bin/webpack.js --config build/webpack.dev.js --watch"
 },

注意 debug 指令碼要傳入 --inspect-brk ，這樣才可以開啟 node 的除錯功能。

VS Code 除錯選單點選執行按鈕，我們就可以愉快的除錯 webpack.dev.js

可以看到，webpack 內部的資料結構盡收眼底。

Chrome 開發者工具風格

剛才的 launch.json 中，有 port: 9229 這個屬性，我們可以在瀏覽器訪問 chrome://inspect ，就能以我們熟悉的 chrome 風格來除錯 node 程式了。

總結

除錯程式能夠幫助我們對程式碼有更深刻的瞭解，能夠提供執行時的執行上下文、呼叫棧等資訊。此外，在除錯線上混淆後的程式碼時，對各種 a、o、f 等難以理解的變數名引數名也能通過執行時的變數資料輕易分析出程式碼的基本邏輯。

到此這篇關於vscode 除錯 node.js的方法步驟的文章就介紹到這了,更多相關vscode 除錯 node.js內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！