Vscode를 사용하여 Node와 같은 프로젝트를 작성해 본 친구들은 모두 알고 있습니다. 문제를 해결하려면 대부분 console.log를 통해 인쇄하여 문제가 어디에 있는지 확인합니다. 관련된 문제가 더 복잡하면 디버깅을 선택하고 Vscode에서 디버그를 통해 해결하려고 시도합니다. 그러나 Nest 프로젝트인 경우 launch.json을 구성하는 것 외에도 디버깅할 때 메시지가 표시될 수 있습니다.작업 "tsc 찾을 수 없습니다":build-tsconfig.json". 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"
]
}
]
}复制代码로그인 후 복사
下面解释下上面配置的两个任务
-
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
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🎜위에 구성된 두 가지 작업은 아래에 설명되어 있습니다.🎜
-
tsc: build: tsconfig.json 파일을 사용하는 TypeScript 컴파일 작업 TypeScript 코드를 컴파일합니다. 작업 유형은 typescript이므로 tsc 명령을 사용하여 컴파일을 수행합니다. 컴파일하는 동안 오류가 있으면 $tsc 문제 일치자가 오류 메시지를 식별하는 데 사용됩니다.
-
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
