React Native iOS模拟器Chrome调试刷新后断点错位如何解决

临时快速修复（单次生效，适用于临时调试场景） #

• 热重载触发断点错位后，在Chrome调试器页面按Command + R（Mac）/Ctrl + R（Windows）手动重载调试端，重载后重新打的断点即可和源码位置对齐
• 也可在iOS模拟器中按Command + D呼出调试菜单，重新点击Debug选项挂载新的调试会话，无需重启整个App

永久性配置修复（修改项目配置从根源解决问题） #

• 调整Metro打包的sourcemap生成规则，在项目根目录的metro.config.js中添加如下配置，关闭debug模式下的函数名混淆，避免映射偏移：

module.exports = {
  transformer: {
    minifierConfig: {
      keep_fnames: true,
      mangle: {
        keep_fnames: true
      }
    }
  },
  serializer: {
    sourceMapUrl: (path) => path
  }
}

• 检查iOS项目编译配置，在ios/Podfile中确认Debug模式下DEBUG_INFORMATION_FORMAT参数设置为dwarf-with-dsym，保证生成完整的符号映射文件
• 升级React Native版本至0.68及以上，该版本官方修复了增量编译场景下sourcemap生成偏移的已知问题

额外排查点 #

• 确认Chrome调试器未开启多余的sourcemap规则：打开调试器设置 -> 实验性选项，仅保留Enable JavaScript source maps勾选状态，取消其他sourcemap相关实验功能
• 调试时避免同时开启热重载和快速刷新（Fast Refresh），可先在模拟器调试菜单关闭Fast Refresh，手动刷新一次后再重新开启即可

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