React Native环境下Flipper React DevTools开始分析按钮无法启动录制

基础配置校验 #

• 确认react-native-flipper与Flipper桌面端版本严格一致（当前均为0.176.1，此环节无问题），可重新执行安装确保依赖完整性：

  npm install react-native-flipper@0.176.1 --save
  

• 检查Flipper初始化代码：RN 0.67+通常自动配置，但手动确认index.js/App.js中是否包含以下代码（仅在开发环境生效）：

  if (__DEV__) {
    import('react-native-flipper').then(({Flipper}) => {
      Flipper.initializeFlipper();
    });
  }
  

重启与缓存清理 #

• 彻底关闭Flipper桌面端及RN应用（包括模拟器/真机进程），重新启动后再次尝试连接录制。
• 清理RN项目缓存：

  npx react-native start --reset-cache
  

• 清理Flipper缓存：删除对应系统的缓存目录后重启Flipper
  • Mac: ~/Library/Caches/Flipper
  • Windows: %LOCALAPPDATA%\Flipper\Cache
  • Linux: ~/.cache/flipper

调整Profiler设置与设备权限 #

• 在React DevTools的Profiler标签页，切换Record why each component rendered选项的勾选状态，再尝试点击录制按钮。
• 真机调试时，确保设备已开启USB调试权限，且Flipper下拉菜单中能正确识别设备名称（而非“未知设备”）。

版本兼容调整 #

RN 0.67.4属于较旧版本，与Flipper 0.176.1可能存在隐性兼容问题，可尝试降级到兼容性更稳定的版本：

• 安装对应版本的依赖：

  npm install react-native-flipper@0.162.0 --save
  

• 下载并安装Flipper桌面端0.162.0版本，重新连接应用后测试录制功能。

尝试独立版React DevTools #

如果Flipper内置DevTools存在异常，可切换使用独立工具：

npm install -g react-devtools

启动独立工具后，RN应用会自动连接，使用其Profiler功能录制火焰图。

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