如何正确将调试器附加到yarn start-package命令？

问题核心在于预启动任务（preLaunchTask）会等待任务执行结束才启动调试器，但开发服务器是长期运行的进程，因此需要改用attach模式调试，并调整启动脚本开启调试端口。以下是具体配置步骤：

步骤1：修改项目包的启动脚本，开启调试端口 #

在packages/package/package.json的scripts字段中，给start命令添加Node.js调试参数，让服务监听可被Windows访问的端口：

{
  "scripts": {
    // 替换为你的实际入口文件/框架启动命令，示例：
    "start": "node --inspect=0.0.0.0:9229 src/index.js"
    // 如果是React项目，改为：
    // "start": "react-scripts start --inspect=0.0.0.0:9229"
    // 如果是Webpack Dev Server，改为：
    // "start": "webpack-dev-server --inspect=0.0.0.0:9229"
  }
}

• --inspect=0.0.0.0:9229：让Node.js在9229端口开启调试监听，0.0.0.0允许WSL外部（Windows的VS Code）访问该端口。

步骤2：配置tasks.json，让启动任务后台运行 #

修改tasks.json，将服务器启动任务标记为后台任务，避免VS Code等待任务结束：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "yarn start-package",
      "type": "npm",
      "script": "start",
      "path": "packages/package",
      "problemMatcher": [],
      "isBackground": true,
      "runOptions": {
        "background": true
      },
      "presentation": {
        "reveal": "never",
        "panel": "dedicated"
      }
    }
  ]
}

步骤3：配置launch.json为attach模式 #

将调试模式改为attach，自动启动后台任务并附加到调试端口：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Package Debugger",
      "address": "localhost",
      "port": 9229,
      // Windows下的项目包路径
      "localRoot": "${workspaceFolder}/packages/package",
      // WSL对应的项目包绝对路径（替换为你的实际路径）
      "remoteRoot": "/mnt/c/Users/你的用户名/项目路径/packages/package",
      "preLaunchTask": "yarn start-package",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

• 路径映射说明：localRoot是Windows系统中的项目路径，remoteRoot是WSL中对应的挂载路径（比如Windows的C盘在WSL中是/mnt/c/）。

额外注意事项 #

1. 端口冲突排查：如果9229端口被占用，可更换为其他端口（如9230），并同步修改启动脚本和launch.json中的port字段。
2. 框架适配：部分框架（如Vue CLI）默认会开启调试端口，只需确认监听地址为0.0.0.0即可。
3. WSL端口访问：确保WSL的防火墙未阻止9229端口，默认情况下无需额外配置。

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