如何在NX工作区的VSCode中修复NextJS客户端调试断点失效问题

问题根因&修复方案 #

1. 第一优先级修复：配置笔误

你当前Super Admin | App的调试配置存在明显路径错误，sourceMapPathOverrides指向了org-admin的目录，导致Super Admin的客户端源码完全无法匹配映射，断点自然显示为unbounded状态。同时两套客户端配置的sourceMap映射规则不符合NextJS+NX的实际webpack输出格式。

2. 完整修正后的launch.json配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Org Admin | Server Side",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*",
        "webpack://_N_E/./*": "${workspaceRoot}/apps/org-admin/*"
      }
    },
    {
      "name": "Org Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}/apps/org-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack://_N_E/*": "${webRoot}/*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "Super Admin | Server Side",
      "port": 9230,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/apps/super-admin/*",
        "webpack://_N_E/./*": "${workspaceFolder}/apps/super-admin/*"
      }
    },
    {
      "name": "Super Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3002",
      "webRoot": "${workspaceFolder}/apps/super-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack://_N_E/*": "${webRoot}/*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

3. 开启NextJS客户端sourceMap生成

分别修改apps/org-admin/next.config.js和apps/super-admin/next.config.js，添加配置确保开发环境生成完整sourceMap：

const nextConfig = {
  // 你原有配置保留，新增以下内容
  productionBrowserSourceMaps: false,
  webpack: (config) => {
    config.devtool = 'eval-source-map'
    return config
  }
}
module.exports = nextConfig

同时确认两个应用的tsconfig.json中已开启以下配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true
  }
}

4. 修正多应用服务端调试端口冲突

你当前根目录.env统一配置的NODE_OPTIONS=--inspect=0.0.0.0:9229会导致两个应用启动时抢占同一调试端口，需拆分配置：

• 删除根目录.env中的该配置
• 在apps/org-admin/.env.local中添加NODE_OPTIONS=--inspect=0.0.0.0:9229
• 在apps/super-admin/.env.local中添加NODE_OPTIONS=--inspect=0.0.0.0:9230

5. 调试操作校验

启动应用时使用标准开发命令nx serve org-admin、nx serve super-admin，等待应用完全启动后再启动对应VSCode调试配置，即可正常命中客户端断点。

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