帶你在VSCode中調試Nestjs專案（教學）

用Vscode寫過Node這類專案的小夥伴們都知道, 如果我們想要排查問題的時候大部分都是透過console.log進行列印來看問題在哪裡, 如果涉及到的問題比較複雜的時候會選擇透過Vscode中debug來調試嘗試解決, 可如果是Nest專案的話, 除了配置launch.json的話, 在調試的時候可能會提示找不到任務「tsc: build - tsconfig.json」。

package.json

首先在package.json的script腳本中設定指令來最佳化, 這樣不需要每次都在終端機敲那麼長的指令。 【推薦學習：vscode教學、程式設計教學】

{
  "scripts": {
    "start":"nest start",
    "dev:debug": "pnpm run start:debug",
    "start:debug": "nest start --debug --watch",
  }}复制代码

我們透過執行pnpm run dev:debug 就可以運作在使用nest命令運行項目的時候添加`—debug``參數來進行調試, 但是這個時候我們只是把項目運行起來了, 在VSCode中打斷點的時候並不會斷住, Debug面板中也沒有運行

Attach 偵錯

• 開啟指令面板（command shift p)，搜尋Toggle Auto Attach，勾選後回車啟用

• 選擇總是: 這樣只要在終端機通過nodejs運行任務的時候都會啟動一個ws的調試端口

這個時候透過, 終端機會出現下面這行,接著存取http://localhost:9229/json, 就可以看到VSCode運行的每個調試用的wb(wbsocket), VScode調試本質上就是透過雙端通訊的方式進行調試

Debugger listening on ws://127.0.0.1:9229/8e908307-94a7-4513-a525-82953b2c02c7For help, see: https://nodejs.org/en/docs/inspector复制代码

launch.json

現在我們可以透過本配置lunch.json的調試方式為attach 來進行調試剛剛VScode提供的調試進程

{  "version": "0.2.0",  "configurations": [
    {      "type": "node",      // 调试方式改为附加
      "request": "attach",      "name": "Attach Nest",      "skipFiles": [        "<node_internals>/**"
      ],      // 启动调试器之前运行任务进行编译TS项目
      "preLaunchTask": "npm: dev:debug",      "outFiles": [        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]
}复制代码

注意preLaunchTask, 上面我們說到在啟動調試的時候會提示會提示**找不到任務“xxx tsconfig.json”。 **我們需要在調試先透過tsc 編譯

tasks.json

在VS Code中透過 tasks 配置文件，可以定義一組任務以便在編輯器中執行。

{  "version": "2.0.0",  "tasks": [
    {      "type": "typescript",      "tsconfig": "tsconfig.json",      "problemMatcher": [        "$tsc"
      ],      "group": "build",      "label": "tsc: build",      "options": {        "emit": "true",        "pretty": "true",
      }
    },
    {      "type": "npm",      "script": "dev:debug",      "problemMatcher": [],      "label": "npm: dev:debug",      "detail": "pnpm run start:debug",      "dependsOn": [        "tsc: build"
      ]
    }
  ]
}复制代码

下面解釋下上面配置的兩個任務

1. tsc: build: TypeScript 編譯任務，它使用tsconfig.json 檔案中的設定來編譯TypeScript 程式碼。任務的類型為 typescript，所以它會使用 tsc 指令來執行編譯。在編譯期間，如果有任何錯誤，則會使用 $tsc 問題匹配器來識別錯誤訊息。
2. npm: dev:debug: 執行 NestJS 應用程式的偵錯任務。它的型別是 npm，可以使用 NPM、Yarn 或 PNPM 來執行腳本。該任務執行 dev:debug 腳本，該腳本由 NestJS 應用程式開發人員定義，並在 package.json 檔案中指定。該任務的依賴關係是tsc: build，這表示在執行npm: dev:debug 任務之前，需要先執行tsc: build# 任務來編譯TypeScript 程式碼。

至此我們就可以透過在VScode面板點擊偵錯按鈕, 執行npm: dev:debug 任務使用編譯後的 JavaScript 程式碼來啟動 NestJS 應用程式的偵錯版本。透過這種方式，可以在 VS Code 中輕鬆執行建置和偵錯操作，並使用簡單的命令來啟動整個過程。

更多關於VSCode的相關知識，請造訪：vscode基礎教學！

以上是帶你在VSCode中調試Nestjs專案（教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！