VSCode で Nestjs プロジェクトをデバッグします (チュートリアル)

Vscode を使用して Node などのプロジェクトを作成した友人は皆、問題のトラブルシューティングを行う場合、ほとんどの作業が console.log を通じて行われることを知っています。問題がどこにあるかを確認します。関係する問題がより複雑な場合は、デバッグを選択し、Vscode でのデバッグを通じて解決しようとします。ただし、Nest プロジェクトの場合は、launch.json の構成に加えて、プロンプトが表示される場合があります。 ## デバッグ中 #タスク「tsc: build - tsconfig.json」が見つかりません。

package.json

最初に、最適化するために package.json のスクリプトにコマンドを設定します。これにより、毎回ターミナルにこのような長いコマンドを入力する必要がなくなります。 [推奨学習:

vscode チュートリアル、プログラミング教育]

{
  "scripts": {
    "start":"nest start",
    "dev:debug": "pnpm run start:debug",
    "start:debug": "nest start --debug --watch",
  }}复制代码

コマンドを実行するときに

pnpm run dev:debug を実行することで、nest を実行して使用できます。プロジェクトを実行するには、デバッグ用の `-debug` パラメータを追加しますが、この時点ではプロジェクトを実行するだけです。VSCode にブレーク ポイントが設定されている場合、中断されず、デバッグ パネルは実行されません。

デバッグのアタッチ

コマンド パネル (コマンド シフト p) を開き、
• Toggle Auto Attach を検索して選択し、Enter キーを押して有効にします

常に選択: この方法では、タスクがターミナルで nodejs を介して実行されるたびに、ws デバッグ ポートが開始されます

これを渡すと、次の行がターミナルに表示され、

http://localhost:9229/json にアクセスすると、それぞれに使用される wb (wbsocket) が表示されます。 VSCode によって実行されるデバッグ。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

これで、ランチのデバッグ方法を構成できます。 json as

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 のタスク構成ファイルを通じて、一連のタスクを定義して、編集者。

{  "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"
      ]
    }
  ]
}复制代码

以下では、上で構成した 2 つのタスクについて説明します

1. tsc: build: tsconfig.json # を使用する TypeScript コンパイル タスク## TypeScript コードをコンパイルするためのファイル内の構成。タスクのタイプは typescript であるため、tsc コマンドを使用してコンパイルを実行します。コンパイル中にエラーが発生した場合、$tsc 問題マッチャーを使用してエラー メッセージが特定されます。
npm: dev:debug
2. : NestJS アプリケーションのデバッグ タスクを実行します。そのタイプは npm で、NPM、Yarn、または PNPM を使用してスクリプトを実行できます。このタスクは、NestJS アプリケーション開発者によって定義され、package.json ファイルで指定された dev:debug スクリプトを実行します。このタスクの依存関係は tsc: build です。つまり、npm: dev:debug タスクを実行する前に、tsc: build タスクを実行する必要があります。 TypeScript コードをコンパイルします。
この時点で、コンパイルされた JavaScript コードを使用して、VScode パネルのデバッグ ボタンをクリックし、

npm: dev:debug## を実行することで、NestJS アプリケーションのデバッグ バージョンを開始できます。 ＃ タスク。このようにして、VS Code でビルドとデバッグ操作を簡単に実行し、簡単なコマンドを使用してプロセス全体を開始できます。

VSCode の詳細については、vscode 基本チュートリアル

をご覧ください。

以上がVSCode で Nestjs プロジェクトをデバッグします (チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。