Next.js 13项目Docker容器内VSCode调试失效问题求助

• 检查Next.js Source Map配置
  Next.js 13在开发模式下默认生成source map，但显式配置可确保映射完整性。在项目根目录的next.config.js中添加：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    devtool: 'source-map',
  }
  
  module.exports = nextConfig
  

  该配置强制生成完整的source map，帮助调试器精准关联本地与容器内代码。

• 禁用Next.js缓存启动项目
  启动容器时添加环境变量禁用缓存，避免编译后代码与本地代码不一致：

  NODE_OPTIONS='--inspect=0.0.0.0' NEXT_DISABLE_CACHE=1 next dev
  

  缓存的陈旧代码会导致source map映射失效，进而使断点无法触发。

• 验证路径映射准确性
  查看VSCode调试控制台的trace日志，搜索SourceMap path mapping相关条目，确认本地路径${workspaceFolder}/apps/app与容器内路径/usr/src/app的文件映射是否完全匹配，比如检查页面组件、API路由等核心文件的映射记录。

• 确认断点位置有效性
  确保断点设置在本地apps/app/app/（App Router模式）或apps/app/pages/（Pages Router模式）下的业务代码文件中，避免在node_modules目录、Next.js自动生成的临时文件上设置断点。

• 手动触发代码执行
  使用--inspect启动后，手动访问对应页面路由或触发相关业务逻辑，确认断点是否在代码执行时触发（仅用--inspect-brk能中断首行说明连接正常，断点未触发可能是代码未执行到对应位置）。

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