如何配置NextJS 14与VSCode调试并使用Chrome自定义用户配置文件？

核心问题分析 #

1. 第一个配置存在JSON语法错误：serverReadyAction中pattern行末尾缺少逗号，导致VSCode无法正确解析自动打开页面的逻辑，Chrome停留在about:blank。
2. 断点未绑定：sourcemap路径匹配规则不准确，且NextJS默认sourcemap配置可能未完全开启。
3. --load-extension已废弃，必须通过加载完整Chrome用户配置文件来启用扩展。

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

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome (Custom Profile)",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/nextjs",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack://_N_E/*": "${workspaceFolder}/nextjs/*",
                "webpack://./~/*": "${workspaceFolder}/nextjs/node_modules/*",
                "webpack:///*": "${workspaceFolder}/nextjs/*"
            },
            // 指定Chrome用户数据目录（替换为你的实际路径）
            "userDataDir": "/Users/xxx/Library/Application Support/Google/Chrome",
            "runtimeArgs": [
                "--profile-directory=Profile 3"
            ]
        },
        {
            "name": "Launch NextJS",
            "type": "node-terminal",
            "request": "launch",
            "cwd": "${workspaceFolder}/nextjs",
            "command": "npm run dev",
            "serverReadyAction": {
                "action": "startDebugging",
                "pattern": "- Local:\\s*(https?://.+)",
                "name": "Launch Chrome (Custom Profile)"
            }
        },
        {
            "name": "Launch Flask",
            "type": "debugpy",
            "request": "launch",
            "module": "flask",
            "cwd": "${workspaceFolder}/flask/api",
            "env": {
                "FLASK_APP": "run.py",
                "FLASK_DEBUG": "1"
            },
            "args": ["run", "--no-debugger", "--no-reload"],
            "justMyCode": true
        }
    ],
    "compounds": [
        {
            "name": "Full Stack Debug",
            "configurations": ["Launch Flask", "Launch NextJS"]
        }
    ]
}

关键配置说明 #

1. 修复JSON语法错误：在serverReadyAction的pattern行末尾添加逗号，确保VSCode能正确触发Chrome自动加载页面。
2. 正确指定Chrome配置文件：
   • userDataDir设置为你的Chrome用户数据目录绝对路径（Mac默认路径为/Users/你的用户名/Library/Application Support/Google/Chrome，Windows为C:\Users\你的用户名\AppData\Local\Google\Chrome\User Data）。
   • runtimeArgs中--profile-directory=Profile 3指定要加载的自定义配置文件名称。
3. 优化SourceMap匹配规则：调整sourceMapPathOverrides，确保VSCode能正确映射编译后的代码到本地源码，解决断点未绑定问题。

额外配置：NextJS SourceMap开启 #

在next.config.js中添加以下配置，确保开发环境生成完整的sourcemap：

module.exports = {
  devtool: 'source-map',
  productionBrowserSourceMaps: true,
}

验证步骤 #

1. 关闭所有正在运行的Chrome实例（避免配置文件被占用）。
2. 启动Full Stack Debug复合配置。
3. 确认Chrome自动打开http://localhost:3000，且已加载自定义配置文件中的扩展（如React DevTools、Redux DevTools）。
4. 在VSCode中设置断点，触发对应操作，验证断点是否正常命中。

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