如何使用VSCode中的npm运行脚本进行调试？

Question

我之前使用gulp并运行gulp从Visual Studio Code调试器启动我的应用程序和监听器,但最近需要通过npm切换到运行脚本.不幸的是,我无法让VSCode能够通过调试器运行npm脚本,因此我不得不求助于运行节点直接启动我的服务器,这样就摆脱了我自动重新加载代码的监听器任务.

这看起来应该很简单,但到目前为止,我没有太多运气.下面是我尝试使用的launch.json文件的片段,但无法找到npm.

{
    ...
        "program": "npm",
        "args": [
            "run",
            "debug"
        ],
    ...
}

这给了我以下错误.

错误请求'launch':程序'c:\ myproject \npm'不存在

相关资源:

• https://github.com/Microsoft/vscode/issues/2726

Answer 1

现在，当您将鼠标悬停在 package.json 中的脚本名称上时，VS Code 会显示一个“调试脚本”按钮。

Answer 2

我刚刚注意到“新终端”下拉列表中的“JavaScript 调试终端”。VSCode 会自动附加到您在该终端窗口中运行的任何内容。

不再需要复杂的调试配置！

Answer 3

看起来VS Code将在2016年10月发布的版本中支持npm脚本和其他启动方案.

下面是一个在GitHub上提出的例子.

packages.json

  "scripts": {
    "debug": "node --nolazy --debug-brk=5858 myProgram.js"
  },

vscode启动配置

{
    "name": "Launch via NPM",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run-script", "debug"
    ],
    "port": 5858
}

Answer 4

1. 在.vscode/launch.json中配置新的调试目标:

   {
       "name": "Attach To npm",
       "type": "node",
       "request": "attach",
       "port": 5858,
       "address": "localhost",
       "restart": false,
       "sourceMaps": false,
       "outDir": null,
       "localRoot": "${workspaceRoot}",
       "remoteRoot": null
   }
   

2. 使用--debug-brk选项配置您的npm以运行节点:

   "scripts": {
     "start": "node app.js",
     "debug": "node --debug-brk app.js"
     ...
   

3. 从shell启动您的应用程序:

    $npm run debug
   

4. 默认情况下,程序将在端口5858中等待连接调试器

5. 因此,在visual studio代码中运行调试器("Attach To npm").

6. 享受你的调试器:)

Answer 5

使用 npm 是可行的，而无需更改您的scripts部分package.json

这里的技巧是传递--inspect-brk=9229to 节点。

该命令看起来像 npm run start -- --inspect-brk=9229

这是.vscode/launch.json：

{  
"version": "0.2.0",
"configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Launch via NPM",
        "runtimeExecutable": "${env:NVM_BIN}/npm", //change this to your npm path
        "runtimeArgs": [
            "run-script",
            "start",
            "--",
            "--inspect-brk=9229"
        ],
         "port": 9229
    },

  ]
}

Answer 6

我认为您正在寻找的是以下配置。

将以下对象添加到文件中的configurations数组中.vscode/launch.json。

{
    "command": "npm run dev",
    "name": "Run npm dev",
    "request": "launch",
    "type": "node-terminal"
}

并立即尝试使用新配置进行调试。VSCode 将处理调试器附件。

不要忘记替换npm run dev为您想要的命令。

Answer 7

这就是我的 launch.json 的样子，它的工作原理是：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch via NPM",
            "request": "launch",
            "runtimeArgs": [
                "run-script",
                "dev"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        }
    ]
}

Answer 8

NPM 脚本和 gulp 并不是真正用于启动应用程序，而是用于运行编译等任务。如果它是一个节点应用程序，我建议您在没有 npm 的情况下以这种方式配置 launch.json。如果您有复杂的侦听器或流程管理器（例如 PM2），请从流程管理器手动启动应用程序，然后使用附加配置。

对于 npm任务"command": "npm"，您可以使用和指定tasks.json "args": ["run"]。