如何在 VSCode 中调试 nodemon 项目

Posted 2023-02-15

技术标签:

【中文标题】如何在 VSCode 中调试 nodemon 项目【英文标题】：How to debug a nodemon project in VSCode 【发布时间】：2019-04-20 11:52:33 【问题描述】：

我有一个 NodeJs 项目，我使用 nodemon 运行它，我希望在调试模式下运行它以执行开发任务，但我无法这样做。

我发现我需要将正确的配置添加到 .vscode 文件夹下的 launch.json 文件中，我有一个 app.js 文件，它是主应用程序文件。该应用程序在node version 4.6.2 和Port 8080 上运行。通常情况下，我使用npm run dev 命令运行应用程序。

以下是我的 launch.json 文件 -


    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        
            "type": "node",
            "request": "launch",
            "name": "MyApp",
            "program": "$workspaceFolder/app.js",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
            //"runtimeExecutable": "/home/user/.nvm/versions/node/v4.6.2/bin/node"
        ,
        
            "type": "node",
            "request": "launch",
            "name": "nodemon",
            "runtimeExecutable": "nodemon",
            "program": "$workspaceRoot/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
        ,
        
            "type": "node",
            "request": "launch",
            "name": "DEBUG",
            "runtimeExecutable": "nodemon",
            "program": "$workspaceFolder/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "runtimeVersion": "4.6.2",
            "protocol": "legacy",
            "port": 8080
        
    ]

package.json如下-


  "name": "myapp",
  "description": "myapp",
  "version": "1.35.0",
  "private": true,
  "scripts": 
    "dev": "nodemon app.js",
    "debug": "nodemon app.js"
  ,
  "dependencies": 
    "async": "1.3.0",
    "aws-sdk": "2.7.20",
    "aws-xray-sdk": "^2.1.0",
    "aws-xray-sdk-restify": "^1.3.0-beta",
    "bcrypt": "0.8.5",
    "body-parser": "1.12.3",
    "compression": "^1.7.0",
    "connect-flash": "0.1.1",
    "cookie-parser": "1.3.4",
    "cron": "1.0.9",
    "csurf": "^1.9.0",
    "csvtojson": "^1.1.2",
    "date-utils": "1.2.16",
    "dotenv": "4.0.0",
    "email-templates": "1.2.1",
    "express": "4.12.3",
    "express-handlebars": "2.0.0",
    "express-jwt": "^5.1.0",
    "express-mailer": "0.2.4",
    "express-session": "1.11.1",
    "express-validator": "3.1.3",
    "handlebars": "^3.0.3",
    "helmet": "^3.5.0",
    "html-pdf": "1.4.0",
    "json-2-csv": "2.0.12",
    "jsonwebtoken": "^7.3.0",
    "multer": "^0.1.8",
    "mysql": "2.6.2",
    "newrelic": "1.25.0",
    "node-schedule": "^1.3.0",
    "nodemailer": "^1.3.4",
    "nodemailer-ses-transport": "1.2.0",
    "passport": "0.2.1",
    "passport-local": "1.0.0",
    "path": "0.11.14",
    "promise": "7.0.0",
    "qs": "^2.4.1",
    "replaceall": "0.1.6",
    "request": "2.55.0",
    "run-parallel": "1.1.0",
    "validator": "^7.0.0",
    "winston": "^2.3.1",
    "winston-daily-rotate-file": "^1.7.0",
    "xlsx": "0.8.8"
  ,
  "devDependencies": 
    "nodemon": "^1.17.3"

当我运行 DEBUG 和 nodemon 配置时，应用程序会启动，但是代码并没有在我在 app.js 文件中设置的断点处暂停。

参考链接 - 1.https://github.com/Microsoft/vscode-recipes/tree/master/nodemon 2.https://github.com/bdspen/nodemon_vscode 3.Can Visual Studio Code be configured to launch with nodemon 4.Cannot debug in VSCode by attaching to Chrome 5.https://code.visualstudio.com/docs/editor/debugging

需要在 package.json 中进行哪些更改，或者在 Launch 配置中进行任何更正 - launch.json，这将有助于我在 VSCode 中为我的用例调试应用程序？

【问题讨论】：

【参考方案1】：

nodemon 监听文件更改并在另一个进程

上重新启动应用程序

所以你的配置是正确的，但调试器永远不会“看到”断点。

使用 nodemon 运行调试模式毫无意义。

这是您可能希望在 VScode 上请求的功能（代码更改时自动重启）

【讨论】：

那么我需要做哪些更改才能在调试模式下运行它，package.json 或 launch.json 中的任何更改都可以帮助我调试吗？对 launch.json 的更改。使用 node 作为您的可执行文件，调试器将在断点处开始停止。（就像您的 launch.jsomn 中的第一个成员使用“runtimeExecutable”：“node”，而不是“runtimeExecutable”：“nodemon”？抱歉没用，应用程序运行但不会在任何断点处暂停:'(【参考方案2】：

将 package.json 更改为

"scripts": 
    "dev": "node app.js",
    "debug": "nodemon --inspect app.js"

--inspect 适用于 >= 6.3 的版本。 --legacy 或 --auto for older versions

和launch.json 到：

"version": "0.2.0",
"configurations": [
    
        "type": "node",
        "request": "attach",
        "name": "Node: Nodemon",
        "processId": "$command:PickProcess",
        "restart": true,
        "protocol": "inspector"
    
]

重启标志是这里的关键。

通过新的调试脚本启动应用

npm 运行调试

在 Debug 视图中，选择 Node: Nodemon 配置并按下播放或 F5 选择上面启动的进程

查看更多：vscode nodemon recipe

【讨论】：

--inspect is for versions >= 6.3. --legacy or --auto for older versions 指的是node，当前是v15。注意：您应该选择的进程不是 nodemon 之一，而是运行您的应用程序的节点进程。【参考方案3】：

在 vscode 配置中，您可以设置runtimeExecutable，它将运行您提供的程序。设置restart:true 这样vs代码调试器就可以重启进程了。

这是一个示例配置：


    "version": "0.2.0",
    "configurations": [
        
            "type": "node", 
            "request": "launch",
            "name": "nodemon",
            "runtimeExecutable": "nodemon",
            "program": "$workspaceFolder/bin/www",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "env": 
                "debug": "app:*",
            
        
    ]

将program 更新为要调试的节点文件。

这比将调试器附加到正在运行的节点进程要容易。

【讨论】：

我知道我们不应该写 cmets 只是为了说“谢谢”，但非常感谢。在此之前，我不知道我尝试了多少不同的 launch.json 都没有成功！（不过，在我的情况下，我必须将 "$workspaceFolder/bin/www" 更改为 "$workspaceFolder/server"）。我了解到，当我在您的示例中使用 launch 时，我需要与我的调试 html 文件相关的 program 键（但您的 program 指的是文件夹，而不是文件）。如果我在 Geek 的另一个示例中使用 attach，我需要我想要调试的 processId 和 pick the process（我之前使用 nodemon 开始）。【参考方案4】：

正如@the Geek 建议的那样，

你应该修改launch.json如下：


    "version": "0.2.0",
    "configurations": 
  [    
    
        "type": "node",
        "request": "attach",
        "name": "Attach by Process ID",
        "processId": "$command:PickProcess"
    
  ]

启动服务器“npm run dev”（如您所见，在“请求”属性中，我们设置为附加。所以我们必须先运行服务器，然后附加调试器）。

在类似 bug 的图标中单击 vscode 左侧。在顶部，您会看到绿色的小播放图标。单击其右侧的下拉箭头，然后选择“按进程 ID 附加”。

单击播放图标，然后 vscode 底部的条应变为深橙色。现在尝试提出请求。断点会正确命中！

【讨论】：

【参考方案5】：

您可以使用 F5 启动和附加 nodemon，但需要进行更多设置。

我们必须首先通过 VS Code 任务预启动 nodemon，然后附加。

我使用远程调试器来附加，因为它不需要额外的点击来选择要附加的进程，而 VS Code 进程选择器目前是broken in WSL2，这是我的主要开发环境。

tasks.json（来自this answer）：


  "version": "2.0.0",
  "tasks": [
    
      "label": "npm dev",
      "type": "npm",
      "script": "dev",
      "isBackground": true,

      // This task is run before some debug tasks.
      // Problem is, it's a watch script, and since it never exits, VSCode
      // complains. All this is needed so VSCode just lets it run.
      "problemMatcher": [
        
          "pattern": [
            
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            
          ],
          "background": 
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": "."
          
        
      ]
    
  ]

launch.json:


  "type": "node",
  "request": "attach",
  "name": "Launch & Attach",
  "restart": true,
  "localRoot": "$workspaceRoot",
  "remoteRoot": "$workspaceRoot",
  "preLaunchTask": "npm dev"

在 npm 开发脚本中（对于节点 >= 6.9）：

nodemon --watch src -e js --exec node --inspect .

注意 - 如果您的流程启动时间超过 10 秒，则此方法将不起作用。在这种情况下，您必须弄清楚如何在预启动任务完成时向 VS Code 发出信号。这可能可以通过使用 beginPattern / endPattern 正则表达式来实现，虽然我还没有尝试过。

【讨论】：

【参考方案6】：

我遇到了附加到 Dockerized nodemon 进程的类似问题。我在this article 中找到了解决方案。我可以通过改变三件事让它工作：

--inspect=0.0.0.0

debug

  "scripts": 
    "debug": "nodemon -w lib -w server.js --inspect=0.0.0.0 server.js"

docker-compose

ports:
  - "8080:8080"
  - "9229:9229"

launch.json

    "configurations": [
        
            "name": "Attach to Node in Docker",
            "type": "node",
            "address": "localhost",
            "port": 9229,
            "request": "attach",
            "restart": true
        
    ]

"restart": true 选项允许调试器在 nodemon 在监视文件更改后重新编译时自动重新附加。

【讨论】：

以上是关于如何在 VSCode 中调试 nodemon 项目的主要内容，如果未能解决你的问题，请参考以下文章

json nodemon的VSCode调试设置

VSCode - 如何使用启动配置调试启动自己的调试器的节点程序？

如何调试应用程序并使用 nodemon 测试手表

如何在 nodeJs 中使用 nodemon 调试应用程序

Docker运行nodejs及调试

PhpStorm nodemon 调试 - 不要停在断点上