React Native Chrome调试无原始源码，VSCode断点不同步求助

以下是针对Expensify这类复杂React Native项目的具体排查和修复步骤：

1. 确认Webpack Source Map配置的正确性 #

• 找到项目开发环境的Webpack配置文件（如webpack.dev.js或webpack.config.js中对应开发环境的分支），确保devtool设置为eval-source-map（开发环境最优选择，兼顾速度和准确性）或source-map：

  module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    // ...其他配置
  };
  

• 若项目使用SourceMapDevToolPlugin，需手动配置确保包含源码目录、排除依赖：

  const webpack = require('webpack');
  
  module.exports = {
    // ...
    plugins: [
      new webpack.SourceMapDevToolPlugin({
        filename: '[file].map',
        include: /src\/.*/, // 匹配你的源码目录
        exclude: /node_modules\/.*/,
      }),
      // ...其他插件
    ],
  };
  

• 检查是否有压缩类插件（如TerserPlugin）在开发环境被启用，这类插件会破坏source map，需确保开发环境禁用：

  module.exports = {
    optimization: {
      minimize: false, // 开发环境关闭压缩
      // ...
    },
  };
  

2. 验证TypeScript与Babel的Source Map配置 #

• 打开tsconfig.json，确保sourceMap设为true：

  {
    "compilerOptions": {
      "sourceMap": true,
      // ...其他配置
    }
  }
  

• 检查Babel配置文件（如babel.config.js或.babelrc），确保启用source map生成：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    sourceMaps: 'both', // 或设为true
    // ...其他配置
  };
  

• 若使用ts-loader，确保其配置中未关闭source map：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          use: [
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: false, // 若开启transpileOnly，需配合fork-ts-checker-webpack-plugin
                compilerOptions: {
                  sourceMap: true,
                },
              },
            },
          ],
        },
      ],
    },
  };
  

3. 调整Webpack-dev-server与VSCode调试配置 #

• 在Webpack-dev-server配置中开启writeToDisk，确保source map文件写入磁盘，避免内存打包导致路径不匹配：

  module.exports = {
    devServer: {
      devMiddleware: {
        writeToDisk: true,
      },
      // ...其他配置
    },
  };
  

• 检查VSCode的launch.json调试配置，确保source map相关选项正确：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:8080", // 匹配你的dev-server地址
        "sourceMaps": true,
        "resolveSourceMapLocations": [
          "${workspaceFolder}/**",
          "!**/node_modules/**"
        ],
        "webRoot": "${workspaceFolder}/src" // 指向你的源码根目录
      }
    ]
  }
  

4. Chrome调试器设置与缓存清理 #

• 打开Chrome调试器的Settings（右上角齿轮图标），确保勾选Enable JavaScript source maps和Enable CSS source maps；
• 在Chrome的Sources面板中，检查是否能在webpack://目录下找到原始的.tsx源码，而非转译后的文件；
• 清理项目缓存：删除node_modules/.cache、Webpack临时缓存目录，或执行npm clean后重新安装依赖并编译。

5. 排查项目特定插件影响 #

Expensify这类大型项目可能使用了自定义插件或特殊的打包逻辑，可尝试：

• 临时禁用热重载插件（如react-refresh-webpack-plugin），重启服务后测试断点同步；
• 关闭代码分割相关配置（如splitChunks），简化打包流程后排查问题；
• 逐步禁用非核心Webpack插件，定位是否有插件干扰source map生成。

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