VS Code调试Next.js客户端显示转译后JS代码问题咨询

• Next.js 新版本开发模式默认使用eval-source-map格式输出客户端调试映射，VS Code内置的JS调试器默认不会解析eval包裹的代码对应的Source Map，异步函数经过SWC转译后生成的带哈希的sourceURL无法被直接识别，就会直接展示转译后的代码。
• 原有launch.json配置缺少Source Map路径映射规则，调试器获取到编译后带哈希的文件路径时，无法关联到本地工作区的原始源文件。
• 全栈调试配置没有显式开启Source Map解析、指定工作区路径，容易出现服务端、客户端调试上下文的映射错位。

1. 修改Next.js配置，调整开发环境Source Map输出格式 #

在项目根目录找到next.config.js，添加如下配置，强制客户端开发环境输出VS Code可识别的Source Map：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config, { dev, isServer }) {
    if (dev && !isServer) {
      // 仅客户端开发环境替换devtool配置，不影响服务端和生产构建
      config.devtool = 'inline-source-map'
    }
    return config
  }
}

module.exports = nextConfig

2. 更新VS Code调试配置launch.json #

替换原有配置为如下内容，补充Source Map解析规则和路径映射：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "yarn dev",
      "sourceMaps": true,
      "cwd": "${workspaceFolder}"
    },
    {
      "name": "Client-side",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack://_N_E/./*": "${webRoot}/*",
        "webpack:///./*": "${webRoot}/*"
      },
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ]
    },
    {
      "name": "Full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "yarn dev",
      "sourceMaps": true,
      "cwd": "${workspaceFolder}",
      "serverReadyAction": {
        "action": "debugWithChrome",
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s"
      }
    }
  ]
}

3. 清缓存重启生效 #

• 终止所有正在运行的Next.js开发进程，删除项目根目录下的.next缓存文件夹
• 关闭所有已打开的Chrome调试实例，重启VS Code
• 重新选择对应调试配置启动即可

• 配置生效后，异步函数断点会直接命中原始TSX代码，不会再显示转译后的内容。Chrome DevTools中文件名带哈希是Next.js开发热更新的正常标识，不影响VS Code调试映射。
• 上述配置仅对开发环境生效，不会修改生产构建的配置，不会影响线上代码的体积和安全性。
• 该配置同时兼容Pages Router和App Router模式，不需要额外调整其他路由相关配置。

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