Visual Studio Code中Next.js调试器无法工作的问题求助

解决方案 #

1. 统一调试端口配置 #

你的 launch.json 指定使用端口 9230，但当前 nodemon 的启动命令未明确指定该端口，默认会使用 Node.js 内置的 9229 端口。修改 nodemon 配置的 exec 字段，确保端口匹配：

{
    "watch": ["pages", "components", "helpers", "models"],
    "ext": "js,json,ts,tsx",
    "exec": "node --inspect=9230 node_modules/.bin/next dev"
}

2. 移除开发环境的生产优化配置 #

output: 'standalone' 是 Next.js 针对生产构建的优化选项，在开发模式下启用会破坏源码映射的生成逻辑。修改 next.config.js，仅在生产环境启用该配置：

/** @type {import('next').NextConfig} */
const path = require('path');

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')]
    },
    // 仅生产环境启用 standalone 输出
    ...(process.env.NODE_ENV === 'production' ? { output: 'standalone' } : {})
};

module.exports = nextConfig;

3. 强制生成完整源码映射 #

在 next.config.js 中添加 devtool 配置，确保服务器端代码生成可被调试器识别的源码映射：

const nextConfig = {
    // ... 现有配置
    devtool: 'source-map', // 为开发环境生成标准源码映射文件
};

4. 配置源码路径映射规则 #

在 launch.json 中添加 sourceMapPathOverrides 字段，帮助调试器将编译后的文件路径映射回原始源码：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Next.js: server-side",
            "type": "node",
            "request": "attach",
            "port": 9230,
            "skipFiles": ["<node_internals>/**"],
            "sourceMapPathOverrides": {
                "webpack://_N_E/./*": "${workspaceFolder}/*",
                "webpack:///*": "${workspaceFolder}/*"
            }
        }
    ]
}

5. 排除 nodemon 干扰验证基础流程 #

先暂时跳过 nodemon，直接运行调试命令确认断点功能：

node --inspect=9230 node_modules/.bin/next dev

如果此时断点正常工作，再重新启用 nodemon，确保其配置未干扰调试流程。

完成以上步骤后，重启开发服务器和调试器，API 文件中的断点应该可以正常绑定。

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