无法在Visual Studio Code中配合Chrome调试Next.js应用如何解决？

问题根因 #

1. 操作逻辑冲突：已通过npm run all启动了带--inspect参数的Next.js服务，占用9229调试端口，再按F5启动launch模式调试会重复启动服务，调试器无法正常挂载
2. 配置覆盖不全：原launch.json仅配置了Node.js服务端调试，未包含Chrome客户端代码的调试配置，客户端断点无法激活
3. Source map冲突：手动配置的webpack devtool和Next.js 12默认适配调试的source map规则冲突，导致路径映射异常

方案一：一键启动调试（无需手动运行npm命令） #

第一步：替换launch.json配置 #

同时支持服务端、客户端代码调试：

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Next.js全栈调试",
      "configurations": ["Next.js: 服务端", "Next.js: 客户端"]
    }
  ],
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Next.js: 服务端",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "cwd": "${workspaceFolder}/frontend",
      "port": 9229,
      "console": "integratedTerminal",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/frontend/*",
        "webpack:///./src/*": "${workspaceFolder}/frontend/src/*"
      }
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Next.js: 客户端",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://_N_E/*": "${webRoot}/*"
      }
    }
  ]
}

第二步：调整next.config.js #

删除手动配置的devtool项，Next.js 12默认已生成适配调试的source map：

module.exports = {}

第三步：操作步骤 #

1. 关闭之前运行npm run all的终端进程
2. 在VS Code调试面板选择「Next.js全栈调试」配置，按下F5即可自动启动服务、打开Chrome，服务端和客户端断点均可正常触发

方案二：保留手动运行npm run all习惯，使用附加模式调试 #

第一步：替换launch.json配置 #

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "附加到Next.js",
      "configurations": ["附加到Next服务端", "附加到Chrome客户端"]
    }
  ],
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "附加到Next服务端",
      "port": 9229,
      "cwd": "${workspaceFolder}/frontend",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/frontend/*"
      }
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "附加到Chrome客户端",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/frontend",
      "port": 9222
    }
  ]
}

第二步：开启Chrome远程调试端口 #

关闭所有Chrome进程后，通过命令行启动Chrome：

• Windows：chrome.exe --remote-debugging-port=9222
• Mac：/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

第三步：操作步骤 #

1. 手动运行npm run all启动后端和Next.js服务
2. 用开启远程调试的Chrome访问http://localhost:3000
3. 在VS Code调试面板选择「附加到Next.js」配置，按下F5即可挂载调试

注意事项 #

• 客户端代码的断点需要等Chrome加载对应页面后才会从灰色变为激活状态
• 热更新后断点失效时，刷新Chrome页面即可恢复
• 确保VS Code已安装「Debugger for Chrome」扩展

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