Question

我以前使用gulp并运行gulp从Visual Studio Code debugger启动我的应用程序和监听器，但最近需要通过 npm 切换到运行脚本。不幸的是，在VSCode中，我无法通过调试器运行 npm 脚本，因此我不得不求助于运行 node 直接启动我的服务器摆脱我自动重新加载代码的监听器任务。

这似乎应该很简单，但到目前为止，我还没有多少运气。以下是我尝试使用的launch.json文件的片段，但无法找到 npm 。

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

这给了我以下错误。

错误请求＆＃39;启动＆＃39;：程序＆＃39; c：\ myproject \ npm＆＃39;不存在

相关资源：

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

Answer 1

似乎VS Code将支持release from October 2016中的npm脚本和其他启动方案。

以下是proposed on 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 2

在.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
}

使用--debug-brk选项配置你的npm运行节点：

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

从shell中启动您的应用：
```
 $npm run debug
```
默认情况下，程序将在端口5858中等待附加调试器
因此，在Visual Studio代码中运行调试器（＆＃34;附加到npm＆＃34;）。
享受您的调试器：）

Answer 3

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

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

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

现在尝试使用新配置进行调试。 VSCode 会处理调试器附件。

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

Answer 4

这是我的 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 5

我尝试了GutiMac和Jpierson提供的解决方案，但由于某些原因，我无法使调试器与其中任何一个一起工作。

对我来说很好的替代解决方案（Ubuntu 16，节点8.9.1，VS 1.8.1）是使用这个简单的应用程序启动器（将在VS launch.json的配置数组中添加）：

#myModal

Answer 6

使用npm可行，而不必更改scripts中的package.json部分

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

该命令看起来像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 7

在运行外部npm运行脚本时，我还没有找到如何将--inspect-brk=9229传递给node的解决方案。因此，这是解决方法启动配置的解决方案。

如果要使用参数或什至脚本链来调试外部npm脚本，则可以直接从节点运行它们。例如，诸如angular-cli运行脚本之类的脚本：

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
},

大多数外部票据都位于node_modules/bin文件夹中。您只需要找到脚本并弄清楚它运行的js文件。对于ng，它node_modules/@angular/cli/bin/ng。这是最终的启动配置：

{
    "type": "node",
    "request": "launch",
    "name": "Launch ng build",
    "runtimeExecutable": "node",
    "runtimeArgs": [
        "--inspect-brk=9229",
        "node_modules/@angular/cli/bin/ng"
    ],
    "args": ["build"],
    "port": 9229
}

因此，当您开始调试时，您将启动下一个命令：

node --inspect-brk=9229 node_modules/@angular/cli/bin/ng build

现在您可以在外部脚本中设置断点了。

Answer 8

我的情况有些不同。我正在测试一个api服务器和一个客户端（针对该api服务器）。这对我有用。

（api服务器的）package.json

  "scripts": {
    "start": "DEBUG=users:* PORT=3333 SEQUELIZE_CONNECT=models/sequelize-sqlite.yaml node user-server",
    "debug": "DEBUG=users:* PORT=3333 SEQUELIZE_CONNECT=models/sequelize-sqlite.yaml node --inspect-brk user-server"
  },

launch.json （属于api服务器）

"configurations": [
    {
        "type": "node",
        "request": "attach",
        "name": "Attach to Remote",
        "address": "localhost",
        "port": 9229,
        "localRoot": "${workspaceFolder}",
        "remoteRoot": "${workspaceFolder}",
        "skipFiles": [
            "<node_internals>/**"
        ]
    },

完成后，我将执行以下操作。

npm运行调试
您应该立即得到这样的内容-调试器在ws：//127.0.0.1：9229 / 8df6503b-00e9-43da-ac53-c54a013ba53f上监听
附加到（在调试菜单中）“附加到远程”（如果您具有多个调试配置，则输入任意名称），然后单击“运行”。
如果成功，您将立即看到类似以下内容的内容-附加了调试器

这将运行api服务器，并使调试器开始为我调试。

最后，要实际测试api客户端，我将像这样运行api客户端文件。 注意-所有文件都在根文件夹中。如果文件分布在其他位置，则必须相应地修改localRoot和remoteRoot。

PORT=3333 node users-add-testthisman1.js

在这里，重要的是要注意我的客户端配置。

 var client = restify.createJsonClient({
  url: 'http://localhost:'+process.env.PORT,
  version: '*'
});

如果您有不同的配置，那么您的命令行当然会有不同的参数。

Answer 9

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

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

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

9 个答案: