帶你在VSCode中調試Nestjs項目(教程)

帶你在VSCode中調試Nestjs項目(教程)

vscode寫過Node這類項目的小伙伴們都知道, 如果我們想要排查問題的時候大部分都是通過console.log進行打印來看問題在哪, 如果涉及到的問題比較復雜的時候會選擇通過Vscode中debug來調試嘗試解決, 可如果是Nest項目的話, 除了配置launch.json的話, 在調試的時候可能會提示 找不到任務“tsc: build – tsconfig.json”。

package.json

首先在package.json的script腳本中配置命令來優化, 這樣不需要每次都在終端敲那么長的命令。【推薦學習:vscode教程、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,選中后回車啟用

帶你在VSCode中調試Nestjs項目(教程)

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

帶你在VSCode中調試Nestjs項目(教程)

這個時候通過, 終端會出現下面這行,接著訪問vscode教程, 就可以看到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復制代碼

帶你在VSCode中調試Nestjs項目(教程)

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中調試Nestjs項目(教程)

更多關于VSCode的相關知識,請訪問:vscode教程!

? 版權聲明
THE END
喜歡就支持一下吧
點贊8 分享