如何在VSCode中使用npm运行脚本进行调试?

131

以前我使用gulp来启动我的应用程序和侦听器,通过Visual Studio Code调试器运行gulp,但最近需要改为通过npm运行脚本。不幸的是,在VSCode中我无法通过调试器运行npm脚本,所以我不得不直接运行node来启动我的服务器,这样就没有自动重新加载代码的监听任务。

这似乎是一件简单的事情,但到目前为止,我还没有什么好运气。以下是我尝试使用的launch.json文件的片段,但找不到npm

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

这给我带来了以下错误。

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

相关资源:

13个回答

2
我的情况有点不同。我正在测试一个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 run debug
  • 您应该立即看到类似于以下内容 - Debugger listening on ws://127.0.0.1:9229/8df6503b-00e9-43da-ac53-c54a013ba53f
  • 在调试菜单中选择“Attach to Remote”(或者您给多个调试配置命名的其他名称),然后点击Run。
  • 如果成功,您将立即看到类似于以下内容 - Debugger attached

这将运行API服务器,并启动调试器进行调试。

最后,为了真正测试API客户端,我会像这样运行API客户端文件。 注意 - 所有文件都在根目录中。如果您的文件分布在其他位置,则必须相应地修改localRoot和remoteRoot。

PORT=3333 node users-add-testthisman1.js

这里需要注意我的客户端配置。
 var client = restify.createJsonClient({
  url: 'http://localhost:'+process.env.PORT,
  version: '*'
});

如果您的配置不同,那么您的命令行将有不同的参数。


1
非常有用。一个细节,如果你正在使用一个监视器,在文件被修改时重新启动进程,请将这两个选项添加到launch.json中,以便调试器自动重新连接:"restart": true, "timeout": 1000 - Dicren

-1

我找到的最简单的方法是:


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

这将以调试模式运行您的脚本,并且可以使用断点。


-7

NPM脚本和gulp并不是用来启动应用程序的,而是用来运行编译等任务。如果是Node应用程序,我建议您在launch.json中进行配置而不是使用npm。如果您有复杂的侦听器或进程管理器(如PM2),请手动从进程管理器启动应用程序,然后使用“附加配置”。

对于npm任务,您可以使用"command": "npm""args": ["run"]来指定一个tasks.json。


我在使用附加选项方面并没有太好的运气,但我也没有尝试过非常努力,因为我认为我会遇到类似的问题。如果您能指出如何在节点不直接运行时(例如通过gulp、webpack或npm,或同时使用三者)附加到节点的任何文档,那将是有帮助的。 - jpierson
8
我看到正在兴起的趋势是使用 npm start 作为启动 Node 应用程序的标准方式。 - jpierson
1
gulp本身只是一个NodeJS脚本。您可以将“program”指向“./node_modules/gulp/bin/gulp.js”(将gulp安装为devDependency),并在args数组中设置任务名称。 - felixfbecker
1
对于附加,您需要向Node传递参数--debug-brk以在第一行中断并等待连接。这意味着您必须通过node --debug-brk node_modules/gulp/bin/gulp <taskname>启动gulp或其他内容,然后才能附加。 - felixfbecker
1
“NPM脚本...并不是用来启动应用程序的”这是非常错误的。npm start?你错过了吗?npm start会运行您的scripts.start配置中的脚本。 - jcollum
重点是,如果您想要一个出色的调试体验,您应该直接在launch.json中启动文件。 - felixfbecker

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接