web-dev-qa-db-ja.com

vscodeを使用してnpmスクリプトをデバッグする適切な方法は何ですか？

デバッグしようとしているnpmスクリプトがあります。私はvscodeを使用しているので、デバッグ構成を作成し、デバッガーでステップ実行します。

私のnpmスクリプトの外観は次のとおりです。

"scripts": {
    ...
    "dev": "node tasks/runner.js",
}

そこで、次のデバッグ構成を作成しました。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "runtimeExecutable": "npm",
            "cwd": "${workspaceRoot}",
            "runtimeArgs": [
                "run", "dev"
            ],
            "port": 5858,
            "stopOnEntry": true
        }
    ]
}

そして、それを起動するとスクリプトが実行されますが、vscodeは接続できず、エラーが発生します：

「レガシー」プロトコル経由でランタイムに接続できません。 「インスペクタ」プロトコルの使用を検討してください（10000ミリ秒後のタイムアウト）。

インスペクタープロトコルを追加してみました。

       {
            "type": "node",
            "request": "attach",
            "name": "Attach (Inspector Protocol)",
            "port": 9229,
            "protocol": "inspector"
       }

そして、次を介してnpmスクリプトを実行します。

npm run dev --inspect

そして今度はエラーが出ます：

Nodeが--inspectで起動されたことを確認します。10000ミリ秒後にタイムアウトしてランタイムプロセスに接続できません理由：ターゲットに接続できません：接続ECONNREFUSED 127.0.0.1:9229））.

欠けている部分はわかりません。

---（タグの複製ごとに編集

私は他の質問を再確認します：vscodeを介してnpmスクリプトをデバッグしますが、他の質問と回答の詳細はそれほど詳細で具体的ではありません。誰かが私が遭遇した特定のvscodeエラーメッセージまたは私が持っていた設定タイプを検索している場合、彼らは必ずしもこの質問の選択された答えが与えるレベルの答えの詳細を取得しません。

node.jsnpmvisual-studio-code
20
Chris Schmitz

npm scriptをデバッグしようとしないでください。本当に必要なのは、npm runコマンドで起動されるスクリプトにデバッガーをアタッチすることです（ここでのNPMはタスクランナーとしてのみ使用されます）。

{
  "version": "0.2.0",
  "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceRoot}/tasks/runner.js"
      }
  ]
}

Npmスクリプトを使用して本当に実行したい場合は、次の構成を使用できます。

{
  "type": "node",
  "request": "launch",
  "name": "Launch via NPM",
  "runtimeExecutable": "npm",
  "windows": {
    "runtimeExecutable": "npm.cmd"
  },
  "runtimeArgs": [
    "run-script",
    "dev"
  ],
  "port": 5858
}

ただし、 change スクリプトコマンド（デバッグポートを指定）も必要です。

  "scripts": {
    "dev": "node --nolazy --debug-brk=5858 tasks/runner.js"
  },

歯車アイコンをクリックして選択するだけで、さまざまなデバッグ構成を探索できます。

enter image description here

Node.jsデバッグの詳細については、 VS Code documentation をご覧ください。

22
Jakub Synowiec