用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": [ "<node_internals>/**" ], // 启动调试器之前运行任务进行编译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中文網其他相關文章!