使用 vscode 调试 npm 脚本的正确方法是什么? [英] What is the proper way to debug an npm script using vscode?

问题描述

我有一个要调试的 npm 脚本.我使用 vscode，所以我想我会创建一个调试配置并使用调试器逐步完成它.

我的 npm 脚本外观是:

脚本":{..."dev": "节点任务/runner.js",}

所以我创建了以下调试配置:

<代码>{"版本": "0.2.0",配置":[{类型":节点"，请求":启动"，"name": "启动程序","runtimeExecutable": "npm","cwd": "${workspaceRoot}",运行时参数":[运行"，开发"],端口":5858，stopOnEntry":真}]}

当我启动它时，脚本运行，但 vscode 永远无法连接，我收到错误:

<块引用>

无法通过传统"协议连接到运行时；考虑使用检查员"协议(10000 毫秒后超时).

我尝试添加检查器协议:

<代码> {类型":节点"，"请求": "附加","name": "Attach (Inspector Protocol)",端口":9229，协议":检查员"}

并通过以下方式运行 npm 脚本:

npm run dev --inspect

这次我得到了错误:

<块引用>

确保使用 --inspect 启动节点.无法连接到运行时进程，10000 毫秒后超时 -(原因:无法连接到目标:connect ECONNREFUSED 127.0.0.1:9229).

我不确定我遗漏了什么部分.

编辑每个重复的标签

我看到另一个问题:通过 vscode 调试 npm 脚本，但其他问题和答案中的细节并不详细和具体.如果有人正在搜索我遇到的特定 vscode 错误消息或我拥有的配置类型，他们不一定会获得此问题所选答案所提供的级别答案详细信息.

解决方案

您不应该尝试调试 npm 脚本，因为您真正想要的是将调试器附加到启动的脚本使用 npm run 命令(这里的 NPM 仅用作任务运行器).

<代码>{"版本": "0.2.0",配置":[{类型":节点"，请求":启动"，"name": "启动程序",程序":${workspaceRoot}/tasks/runner.js"}]}

如果你真的想用 npm 脚本运行它，那么你可以使用以下配置:

<代码>{类型":节点"，请求":启动"，"name": "通过 NPM 启动","runtimeExecutable": "npm",窗户":{"runtimeExecutable": "npm.cmd"},运行时参数":[运行脚本"，开发"],端口":5858}

但你也必须

可以在 VS Code 文档中找到有关 Node.js 调试的更多信息.

I've got an npm script that I'm trying to debug. I use vscode so I thought I'd create a debug configuration and step through it with the debugger.

My npm script look is:

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

So I created the following debug config:

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

And when I fire it the script runs, but vscode is never able to connect and I get the error:

Cannot connect to runtime via 'legacy' protocol; consider using 'inspector' protocol (timeout after 10000 ms).

I tried adding an inspector protocol:

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

And running the npm script via:

npm run dev --inspect

And this time I get the error:

Ensure Node was launched with --inspect. Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9229).

I'm not sure what part I'm missing.

Edit per duplicate tag

I see the other question re: debugging an npm script via vscode, but the details in the other question and answers aren't as detailed and specific. If someone is searching for the specific vscode error messages I ran into or the config type I had they wouldn't necessarily get the level answer detail that this question's chosen answer gives.

解决方案

You shouldn't try to debug the npm script because what you really want is to attach your debugger to the script that is launched with npm run command (NPM here is used only as a task runner).

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

If you really want to run it using npm script, then you can use the following configuration:

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

but you also have to change your script command (specify a debug port)

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

You can explore various debug configurations simply by clicking the gear icon and selecting one.

More about Node.js debugging can be found in the VS Code documentation.

这篇关于使用 vscode 调试 npm 脚本的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！