如何配置Nuclide调试器？React Native开发源映射异常求助

我之前调试React Native时也碰到过Nuclide里sourcemap指向bundle文件而非源码的情况，给你几个实用的解决方案，应该能帮你搞定：

• 确认打包配置里的源映射开关
  首先得确保React Native在打包时正确生成了sourcemaps。开发模式下默认是开启的，但有时候配置可能被误改。检查项目根目录的metro.config.js（旧版本是rn-cli.config.js），确认transformer部分的sourceMap设置为true：

  module.exports = {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      sourceMap: true, // 这个一定要设为true
    },
  };
  

  如果是老版本的React Native，启动服务时可以手动指定生成sourcemap：react-native start --sourcemap-output index.map。

• 清空缓存重启服务和Nuclide
  很多时候就是缓存搞的鬼！先彻底关掉Atom（包括后台的Nuclide进程），然后在终端里按Ctrl+C停止metro服务，接着删除项目的缓存目录（比如node_modules/.cache、ios/build、android/build），再重新启动metro服务react-native start --reset-cache，最后打开Atom加载项目重新连接调试器试试。

• 配置Nuclide的源映射路径覆盖
  有时候Nuclide找不到正确的源码路径，需要手动配置映射。打开Atom的设置面板，找到Nuclide的Debugger选项，在"Source Map Path Overrides"里添加路径映射。比如你的bundle文件在ios/build/Build/Products/Debug-iphonesimulator/YourApp.app/main.jsbundle，源码在项目根目录，就加这样的规则：

  "ios/build/Build/Products/Debug-iphonesimulator/YourApp.app/main.jsbundle": "${workspaceRoot}/index.js"
  

  嫌麻烦的话也可以用通用映射："/*": "${workspaceRoot}/*"，让Nuclide把所有bundle里的路径都映射到项目根目录的源码。

• 检查debugger语句的位置
  别笑，我之前真的不小心在bundle文件里加了debugger...确保你是在自己写的.js/.jsx源码文件里加的debugger语句，而不是误打开了打包后的bundle文件编辑。

• 版本兼容性检查
  要知道Nuclide已经停止维护了，和新版本的React Native可能存在兼容性问题。如果上面的方法都没用，可以试试降级React Native到Nuclide支持的版本，或者更新Nuclide到最后一个稳定版本（Atom包管理器里可以找到）。如果实在不行，可能得考虑迁移到VS Code的React Native调试插件，但如果坚持用Nuclide，找匹配的版本组合很重要。

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