web-dev-qa-db-ja.com

VSCodeでnodemonプロジェクトをデバッグする方法

NodeJsプロジェクトがあり、nodemonを使用して実行しています。
開発タスクのためにデバッグモードで実行したいのですが、実行できません。

.vscodeフォルダーの下のlaunch.jsonファイルに正しい構成を追加する必要があることがわかりました。
メインのアプリファイルであるapp.jsファイルがあります。
そしてアプリケーションはnode version 4.6.2とPort 8080で実行されます。
通常の場合、私はnpm run devコマンドを使用してアプリを実行します。

以下は私のlaunch.jsonファイルです-

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "MyApp",
            "program": "${workspaceFolder}/app.js",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
            //"runtimeExecutable": "/home/user/.nvm/versions/node/v4.6.2/bin/node"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "nodemon",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceRoot}/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
        },
        {
            "type": "node",
            "request": "launch",
            "name": "DEBUG",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
        }
    ]
}

package.jsonは次のとおりです-

{
  "name": "myapp",
  "description": "myapp",
  "version": "1.35.0",
  "private": true,
  "scripts": {
    "dev": "nodemon app.js",
    "debug": "nodemon app.js"
  },
  "dependencies": {
    "async": "1.3.0",
    "aws-sdk": "2.7.20",
    "aws-xray-sdk": "^2.1.0",
    "aws-xray-sdk-restify": "^1.3.0-beta",
    "bcrypt": "0.8.5",
    "body-parser": "1.12.3",
    "compression": "^1.7.0",
    "connect-flash": "0.1.1",
    "cookie-parser": "1.3.4",
    "cron": "1.0.9",
    "csurf": "^1.9.0",
    "csvtojson": "^1.1.2",
    "date-utils": "1.2.16",
    "dotenv": "4.0.0",
    "email-templates": "1.2.1",
    "express": "4.12.3",
    "express-handlebars": "2.0.0",
    "express-jwt": "^5.1.0",
    "express-mailer": "0.2.4",
    "express-session": "1.11.1",
    "express-validator": "3.1.3",
    "handlebars": "^3.0.3",
    "helmet": "^3.5.0",
    "html-pdf": "1.4.0",
    "json-2-csv": "2.0.12",
    "jsonwebtoken": "^7.3.0",
    "multer": "^0.1.8",
    "mysql": "2.6.2",
    "newrelic": "1.25.0",
    "node-schedule": "^1.3.0",
    "nodemailer": "^1.3.4",
    "nodemailer-ses-transport": "1.2.0",
    "passport": "0.2.1",
    "passport-local": "1.0.0",
    "path": "0.11.14",
    "promise": "7.0.0",
    "qs": "^2.4.1",
    "replaceall": "0.1.6",
    "request": "2.55.0",
    "run-parallel": "1.1.0",
    "validator": "^7.0.0",
    "winston": "^2.3.1",
    "winston-daily-rotate-file": "^1.7.0",
    "xlsx": "0.8.8"
  },
  "devDependencies": {
    "nodemon": "^1.17.3"
  }
}

DEBUGおよびnodemon構成を実行すると、アプリが起動します。
しかし、app.jsファイルに置いたブレークポイントでコードが一時停止していません。

参照リンク-
1。 https://github.com/Microsoft/vscode-recipes/tree/master/nodemon
2。 https://github.com/bdspen/nodemon_vscode
3。 nodemonで起動するようにVisual Studio Codeを構成できます
4。 Chromeに接続してもVSCodeでデバッグできません
5。 https://code.visualstudio.com/docs/editor/debugging

ユースケースのVSCodeでアプリケーションをデバッグするのに役立つ、package.json、またはLaunch構成（launch.json）の修正で必要な変更は何ですか？

node.jsdebuggingvisual-studio-codenodemonvscode-debugger
5
Ani

Vscode configでは、指定したプログラムを実行するruntimeExecutableを設定できます。セットする restart:trueしたがって、vsコードデバッガーはプロセスを再起動できます。

これは設定例です：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node", 
            "request": "launch",
            "name": "nodemon",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/bin/www",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "env": {
                "debug": "app:*",
            }
        }
    ]
}

実行中のノードプロセスにデバッガを接続するよりも簡単です。タイプを保持

2
Ridham Tarpara

F5でnodemonを起動して接続できますが、もう少し設定が必要になります。

最初にVS Codeタスクを介してnodemonを起動してから、アタッチする必要があります。

アタッチするプロセスを選択するために追加のクリックが必要ないため、リモートデバッガーを使用してアタッチしています。現在、VS Codeプロセスピッカーはメインの開発環境である WSL2で壊れています です。

tasks.json（ この答え から）：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm dev",
      "type": "npm",
      "script": "dev",
      "isBackground": true,

      // This task is run before some debug tasks.
      // Problem is, it's a watch script, and since it never exits, VSCode
      // complains. All this is needed so VSCode just lets it run.
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": "."
          }
        }
      ]
    }
  ]
}

launch.json：

{
  "type": "node",
  "request": "attach",
  "name": "Launch & Attach",
  "restart": true,
  "localRoot": "${workspaceRoot}",
  "remoteRoot": "${workspaceRoot}",
  "preLaunchTask": "npm dev"
}

そしてnpm devスクリプトで（ノード> = 6.9）：

nodemon --watch src -e js --exec node --inspect .

注-プロセスの開始に10秒以上かかる場合、このアプローチは機能しません。その場合、起動前のタスクが完了したときにVS Codeに信号を送る方法を理解する必要があります。これは、私はまだ試していませんが、おそらくbeginPattern/endPattern regexで遊ぶことで実現できます。

0
kDar

@the Geekが提案するように、

  1. Launch.jsonを次のように変更する必要があります。

    {
    "version": "0.2.0",
    "configurations": 
  [    
    {
        "type": "node",
        "request": "attach",
        "name": "Attach by Process ID",
        "processId": "${command:PickProcess}"
    }
  ]
}

  2. サーバー "npm run dev"を起動します（ご覧のとおり、 "request"プロパティで、接続するように設定しています。そのため、最初にサーバーを実行してから、デバッガーを接続する必要があります）。

  3. バグのようなアイコンでvscodeの左側をクリックします。上部に小さな緑色の再生アイコンが表示されます。右側のドロップダウン矢印をクリックして、「プロセスIDで接続」を選択します。

  4. 再生アイコンをクリックすると、vscodeの下部にあるバーが濃いオレンジ色に変わります。リクエストしてみましょう。ブレークポイントは正しくヒットされます！

0
Andreas