如何使用来自 VSCode 的 npm run 脚本进行调试？

Posted 2023-02-22

【中文标题】如何使用来自 VSCode 的 npm run 脚本进行调试？

【英文标题】：How to debug using npm run scripts from VSCode?

【发布时间】：2016-04-22 11:08:46

【问题描述】：

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

这看起来应该很简单，但到目前为止我还没有多少运气。下面是我尝试使用的 launch.json 文件中的 sn-p，但找不到 npm。

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

这给了我以下错误。

错误请求“启动”：程序“c:\myproject\npm”不存在

相关资源：

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

【参考方案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

【讨论】：

我收到“无法启动调试目标（spawn npm ENOENT）”。对于上述情况，在 VSCode 1.7.2

@andreister 在 Windows 上，我通过使用“npm.cmd”而不是简单的“npm”来让它工作！

我想知道您有脚本的情况，例如：“grunt test”。然后怎样呢？如果您不手动启动节点。

@jpierson “runtimeExecutable”的默认值为“node”（根据 vsode 中的 hover-info，因此可能是所有平台的相应节点可执行文件）。如果你想启动anything.js，把它放在程序中，而不是runtimeExecutable："program": "$workspaceRoot/your-path/here/anything.js"（你这里的路径也可以是已安装包的node_modules/.bin/whatever二进制文件）

我尝试使用节点标志 --inspect-brk，它的工作原理非常棒！

【参考方案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

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

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

从 shell 启动您的应用程序：

 $npm run debug

程序默认会在5858端口等待附加调试器

因此，在您的 Visual Studio 代码中运行调试器（“附加到 npm”）。

享受你的调试器:)

【讨论】：

现在节点标志是--inspect-brk，默认端口是9229，至少在我的机器上。

【参考方案3】：

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

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

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

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

别忘了用你想要的命令替换npm run dev。

【讨论】：

它说“不允许使用属性命令。”

【参考方案4】：

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

【讨论】：

如果提示设置outFiles 的错误提示任何人失败，您可以在“settings.json”文件中使用"debug.javascript.terminalOptions": "outFiles": [] 进行配置。更多信息在这里：code.visualstudio.com/docs/nodejs/…

【参考方案5】：

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

这里的技巧是将--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
    ,

  ]

【讨论】：

这很好用，只是它调用prestart 的 npm 生命周期不起作用，知道如何解决这个问题吗？

【参考方案6】：

这就是我的 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"
        
    ]

【讨论】：

谢谢！在 VSCode v1.56 中为我工作。 （另外，你不需要使用run-script，你可以直接输入run）

只是添加到这个，我也有stopOnEntry所以我可以使用断点。

【参考方案7】：

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

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

  "type": "node",
  "request": "launch",
  "name": "Launch Node App",
  "program": "$workspaceFolder/my-app/my-npm-start-script-dir/index.js"

【参考方案8】：

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

如果你想调试带有参数甚至脚本链的外部 npm 脚本，你可以直接从 node.js 运行它们。例如诸如 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

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

【参考方案9】：

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

package.json（API 服务器的）

  "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: '*'
);

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

【讨论】：

非常有用。一个细节，如果您正在使用在文件修改时重新启动进程的观察程序，请将这两个选项添加到 launch.json 以便调试器自动重新连接："restart": true, "timeout": 1000

【参考方案10】：

对我来说最简单直接的解决方案。这会将 .ts 文件编译成 .js，然后在调试模式下运行节点应用程序

.vscode/launch.json

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

package.json

  "dependencies": 
    "axios": "^0.24.0"
  ,
  "scripts": 
    "debug_my_app": "tsc && node index.js"
  

start the debugger

【参考方案11】：

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

没有更复杂的调试配置！ ???

【参考方案12】：

我开始工作的最简单方法：

---

1. package.json 内部：

"scripts": 
  "startDebug": "node --inspect index.js"

（注意：由于某种原因，不适用于--inspect-brk。）

---

2. 在 VSCode 中：Ctrl+Shift+P => Debug: Toggle Auto Attach => Only with flag (Only auto attach when the '--inspect' flag is given)

现在应该在 VSCode 底部显示Auto Attach: With Flag。

---

3. 在 VSCode 终端中：npm run startDebug

这应该在调试器模式下运行您的脚本，并带有工作断点。

【参考方案13】：

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

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

【讨论】：

我没有使用附加选项的运气，但我也没有努力尝试过，假设我会遇到类似的问题。当节点不直接运行时，您可以指出任何关于如何附加到节点的文档 - 例如通过 gulp、webpack 或 npm，或同时通过这三个:( - 会有帮助。

顺便说一句，我看到的趋势是让npm start 成为启动节点应用程序的标准方式。

gulp 本身就是一个 NodeJS 脚本。您可以将“程序”指向“./node_modules/gulp/bin/gulp.js”（将 gulp 安装为 devDependency）并在 args 数组中设置任务名称。

对于附加，您需要向 Node 传递参数 --debug-brk 以在第一行中断并等待连接。这意味着您必须通过 node --debug-brk node_modules/gulp/bin/gulp 启动 gulp 或其他任何东西，然后您可以附加。

“NPM 脚本......并不是真的用于启动你的应用程序”这是非常错误的。 npm start?你错过了吗？ npm start 在你的 scripts.start 配置中运行脚本。