Vscode? ???? Node? ?? ????? ??? ? ???? ?? ?? ????. ??? ????? ??? console.log? ?? ???? ??? ??? ??? ?????. ??? ??? ? ???? ???? ???? Vscode?? ???? ?? ????? ?????. ??? Nest ????? ?? launch.json? ???? ? ??? ???? ? ???? ??? ? ????.?? "tsc ?? ? ????":build-tsconfig.json". console.log進(jìn)行打印來看問題在哪, 如果涉及到的問題比較復(fù)雜的時(shí)候會(huì)選擇通過Vscode中debug來調(diào)試嘗試解決, 可如果是Nest項(xiàng)目的話, 除了配置launch.json的話, 在調(diào)試的時(shí)候可能會(huì)提示 找不到任務(wù)“tsc: build - tsconfig.json”。

package.json

首先在package.json的script腳本中配置命令來優(yōu)化, 這樣不需要每次都在終端敲那么長的命令?！就扑]學(xué)習(xí)：vscode教程、編程教學(xué)】

{
??"scripts":?{
????"start":"nest?start",
????"dev:debug":?"pnpm?run?start:debug",
????"start:debug":?"nest?start?--debug?--watch",
??}}復(fù)制代碼

我們通過運(yùn)行pnpm run dev:debug 就可以在運(yùn)行在使用nest命令運(yùn)行項(xiàng)目的時(shí)候添加`—debug``參數(shù)來進(jìn)行調(diào)試, 但是這個(gè)時(shí)候我們只是把項(xiàng)目運(yùn)行起來了, 在VSCode中打斷點(diǎn)的時(shí)候并不會(huì)斷住, Debug面板中也沒有運(yùn)行

Attach 調(diào)試

• 打開命令面板（command+shift+p)，搜索Toggle Auto Attach，選中后回車啟用

• 選擇總是: 這樣只要在終端通過nodejs運(yùn)行任務(wù)的時(shí)候都會(huì)啟動(dòng)一個(gè)ws的調(diào)試端口

這個(gè)時(shí)候通過, 終端會(huì)出現(xiàn)下面這行,接著訪問http://localhost:9229/json, 就可以看到VSCode運(yùn)行的每個(gè)調(diào)試用的wb(wbsocket), VScode調(diào)試本質(zhì)上就是通過雙端通信的方式進(jìn)行調(diào)試

Debugger?listening?on?ws://127.0.0.1:9229/8e908307-94a7-4513-a525-82953b2c02c7For?help,?see:?https://nodejs.org/en/docs/inspector復(fù)制代碼

launch.json

現(xiàn)在我們可以通過本配置lunch.json的調(diào)試方式為attach來進(jìn)行調(diào)試剛剛VScode提供的調(diào)試進(jìn)程

{??"version":?"0.2.0",??"configurations":?[
????{??????"type":?"node",??????//?調(diào)試方式改為附加
??????"request":?"attach",??????"name":?"Attach?Nest",??????"skipFiles":?[????????"<node_internals>/**"
??????],??????//?啟動(dòng)調(diào)試器之前運(yùn)行任務(wù)進(jìn)行編譯TS項(xiàng)目
??????"preLaunchTask":?"npm:?dev:debug",??????"outFiles":?[????????"${workspaceFolder}/dist/**/*.js"
??????]
????}
??]
}復(fù)制代碼

注意preLaunchTask, 上面我們說到在啟動(dòng)調(diào)試的時(shí)候會(huì)提示會(huì)提示 **找不到任務(wù)“xxx tsconfig.json”。**我們需要在調(diào)試先通過tsc 編譯

tasks.json

在VS Code中通過 tasks 配置文件，可以定義一組任務(wù)以便在編輯器中執(zhí)行。

{??"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"
??????]
????}
??]
}復(fù)制代碼

下面解釋下上面配置的兩個(gè)任務(wù)

1. tsc: build: TypeScript 編譯任務(wù)，它使用 tsconfig.json 文件中的配置來編譯 TypeScript 代碼。任務(wù)的類型為 typescript，所以它會(huì)使用 tsc 命令來執(zhí)行編譯。在編譯期間，如果有任何錯(cuò)誤，則會(huì)使用 $tsc 問題匹配器來識(shí)別錯(cuò)誤信息。
2. npm: dev:debug: 運(yùn)行 NestJS 應(yīng)用程序的調(diào)試任務(wù)。它的類型是 npm，可以使用 NPM、Yarn 或 PNPM 來運(yùn)行腳本。該任務(wù)執(zhí)行 dev:debug 腳本，該腳本由 NestJS 應(yīng)用程序開發(fā)人員定義，并在 package.json 文件中指定。該任務(wù)的依賴關(guān)系是 tsc: build，這意味著在運(yùn)行 npm: dev:debug 任務(wù)之前，需要先執(zhí)行 tsc: build 任務(wù)來編譯 TypeScript 代碼。

至此我們就可以通過在VScode面板點(diǎn)擊調(diào)試按鈕, 運(yùn)行npm: dev:debug

package.json

?? ???? package.json ????? ??? ???? ?? ?? ??? ??? ????. ?? ???? ??? ????. [?? ??: vscode ????

, Programming Teaching]

rrreee

??? ? pnpm run dev:debug? ???? ???? Nest? ??? ? ????. ????? ????? ???? ?? `—debug` ????? ?????. ??? ??? ????? ???? ????. VSCode? ???? ???? ???? ??? ??? ??? ???? ????

??? ??

• ?? ??? ??(command+shift+p) ?? ?? ??? ??? ? ?? Enter? ??

• ?? ??: ?? ???? ???? nodejs? ?? ??? ??? ??? ws ??? ??? ?????.

???????? ???? ??? ?? ??? ??? , http? ?????. ://localhost:9229/json?? ?? VSCode? ???? ? ???? ???? wb(wbsocket)? ??? ? ????. VScode ???? ????? ?? ?? ????rrreee????

launch.json

???? ? ??? ?? lunch.json? ??? ??? attach? VScode?? ???? ??? ????? ???? ? ??????rrreee?????? ??? ? ??? ??? preLaunchTask? ?????. **?? ? ??? ???? ?????. "xxx tsconfig.json" ???? ?????. **????? ?? tsc? ?? ????? ?????

tasks.json

??VS Code??? ?? ?? ??? ?? ?? ??? ??? ? ????. ????? ???? ?????. ??

rrreee???? ??? ? ?? ??? ??? ???? ????.??

1. tsc: build: tsconfig.json ??? ???? TypeScript ??? ?? TypeScript ??? ??????. ?? ??? typescript??? tsc ??? ???? ???? ?????. ????? ?? ??? ??? $tsc ?? ???? ?? ???? ???? ? ?????.
2. npm: dev:debug: NestJS ??????? ??? ??? ?????. ?? npm ???? NPM, Yarn ?? PNPM? ???? ????? ??? ? ????. ? ??? NestJS ?????? ???? ???? package.json ??? ??? dev:debug ????? ?????. ? ??? ???? tsc: build???. ?? npm: dev:debug ??? ???? ?? tsc: build? ???? ?????. TypeScript ??? ????? ?? ? ?? ??? ??????.

??? ???? VScode ???? ??? ??? ???? npm: dev:debug ??? ???? ???? JavaScript ??? ???? ??? ??? ??? ? ????. NestJS ??????? ??? ?? VS Code?? ?? ? ??? ??? ?? ???? ??? ??? ???? ?? ????? ??? ? ????. ??????????VSCode? ?? ??? ??? ??? ??vscode ?? ??????? ?????! ??

? ??? VSCode?? Nestjs ????? ?????? ?????(???).? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!