用Vscode寫過Node這類專案的小夥伴們都知道, 如果我們想要排查問題的時候大部分都是透過console.log進行列印來看問題在哪裡, 如果涉及到的問題比較複雜的時候會選擇透過Vscode中debug來調試嘗試解決, 可如果是Nest專案的話, 除了配置launch.json的話, 在調試的時候可能會提示找不到任務「tsc: build - tsconfig.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面板中也沒有運行
Toggle Auto Attach，勾選後回車啟用
這個時候透過, 終端機會出現下面這行,接著存取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复制代码
現在我們可以透過本配置lunch.json的調試方式為attach 來進行調試剛剛VScode提供的調試進程
{ "version": "0.2.0", "configurations": [
{ "type": "node", // 调试方式改为附加
"request": "attach", "name": "Attach Nest", "skipFiles": [ "/**"
], // 启动调试器之前运行任务进行编译TS项目
"preLaunchTask": "npm: dev:debug", "outFiles": [ "${workspaceFolder}/dist/**/*.js"
]
}
]
}复制代码 注意preLaunchTask, 上面我們說到在啟動調試的時候會提示會提示**找不到任務“xxx tsconfig.json”。 **我們需要在調試先透過tsc 編譯
在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"
]
}
]
}复制代码下面解釋下上面配置的兩個任務
tsc: build: TypeScript 編譯任務，它使用tsconfig.json 檔案中的設定來編譯TypeScript 程式碼。任務的類型為 typescript，所以它會使用 tsc 指令來執行編譯。在編譯期間，如果有任何錯誤，則會使用 $tsc 問題匹配器來識別錯誤訊息。 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中文網其他相關文章！
