Node+ExpressJS在VS Code调试时无法监听代码变更如何解决？

问题场景 #

我有一个Node+ExpressJS后端测试服务器，通过以下命令启动并监听代码变更：

$ npm run dev

对应的package.json配置如下：

{
  ...
  "main": "index.js",
  "type": "module",
  "scripts": {
    ...
    "dev": "cross-env DEBUG=app nodemon --exec babel-node src/index.js"
  },
  ...
}

同时我通过VS Code的.vscode/launch.json配置进行后端代码调试，配置内容如下：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Backend Debug",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/backend/src/index.js",
      "runtimeExecutable": "${workspaceFolder}/backend/node_modules/.bin/babel-node",
      "runtimeArgs": ["--nolazy"]
    }
  ]
}

问题： 上述launch.json配置可以正常调试后端代码，但调试进程无法监听代码变更，修改代码后服务器不会自动重启。

解决方案 #

方法一：让nodemon接管调试进程（推荐） #

直接配置launch.json让nodemon启动调试，利用它的文件监听能力：
修改.vscode/launch.json为：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Backend Debug with Nodemon",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/backend/node_modules/.bin/nodemon",
      "program": "${workspaceFolder}/backend/src/index.js",
      "runtimeArgs": [
        "--exec", "babel-node",
        "--nolazy"
      ],
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "env": {
        "DEBUG": "app",
        "NODE_ENV": "development"
      }
    }
  ]
}

• 核心是用nodemon作为runtimeExecutable，把原来的babel-node放到runtimeArgs的--exec参数里
• restart: true告诉VS Code调试器在进程重启后重新附加
• env里直接配置原来cross-env设置的环境变量，不需要再依赖命令行配置

方法二：利用VS Code自带的文件监听重启 #

如果不想依赖nodemon，也可以通过VS Code的内置监听触发调试重启：
给调试配置添加watch字段，指定要监听的文件路径：

{
  "name": "Backend Debug",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/backend/src/index.js",
  "runtimeExecutable": "${workspaceFolder}/backend/node_modules/.bin/babel-node",
  "runtimeArgs": ["--nolazy"],
  "watch": ["${workspaceFolder}/backend/src/**/*.js"]
}

• watch字段指定监听src目录下所有js文件，文件变更时VS Code会自动重启调试进程
• 这种方式无需nodemon，但缺少nodemon的忽略特定文件、延迟重启等高级特性

方法三：附加到已运行的nodemon进程 #

保持原来的npm run dev命令，让VS Code附加到正在运行的服务进程：

1. 先通过终端执行npm run dev启动服务
2. 修改launch.json为附加模式：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Backend",
      "type": "node",
      "request": "attach",
      "processId": "${command:PickProcess}",
      "restart": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

• 启动调试时，选择正在运行的babel-node或nodemon进程
• restart: true确保进程重启后调试器自动重新附加

内容的提问来源于stack exchange，提问作者davidesp