调试Next.js/React TypeScript时，如何跳过Webpack自动生成代码？

1. 优化launch.json的skipFiles规则 #

现有配置存在重复条目，且缺少对Webpack内部引导文件、Next.js运行时生成文件的精准匹配，修改后配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**/*",
        "${workspaceFolder}/.next/**/*",
        "**/webpack/bootstrap/**",
        "**/node_modules/next/dist/**",
        "**/tokenService.ts"
      ]
    }
  ]
}

• 移除重复的<node_internals>子条目，**通配符已覆盖所有子文件
• 用**/*替代分类型的匹配规则，跳过依赖和生成目录下的所有文件
• 新增**/webpack/bootstrap/**跳过Webpack内部引导代码
• 新增**/node_modules/next/dist/**跳过Next.js编译后的运行时文件
• 新增**/tokenService.ts精准跳过你提到的Webpack生成文件

2. 配置Next.js的Sourcemap生成规则 #

在项目根目录的next.config.js中添加devtool配置，确保sourcemap仅映射到你的源码：

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

module.exports = nextConfig

• source-map模式生成独立的sourcemap文件，避免调试器解析到Webpack生成的代码

3. 调整tsconfig.json编译选项 #

即使noEmit: true，Next.js仍会读取TypeScript配置用于编译，需确保sourcemap相关配置正确：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "sourceMap": true,
    "inlineSourceMap": false
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "out", ".next"]
}

4. 清理缓存后重启调试 #

• 删除.next文件夹和node_modules/.cache目录
• 重启VS Code和Next.js开发服务
• 重新启动调试会话

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