React Native 0.73用Chrome Debugger遇Flipper弃用报错求解决

问题描述 #

在React Native 0.73版本的默认新项目中，尝试通过Chrome Debugger调试时，终端会抛出如下错误：

Attempting to debug JS in Flipper (deprecated). This requires Flipper to be installed on your system to handle the 'flipper://' URL scheme.

该错误导致无法正常使用Chrome Debugger连接应用进行调试。

复现步骤 #

• 使用CLI创建并以开发模式启动新的React Native应用
• 确保应用在设备或模拟器上正常运行
• 在Android模拟器中按下Ctrl+M，选择打开Chrome Debugger选项
• 终端弹出上述报错信息，无法进入Chrome Debugger工具，也无法建立与应用的调试连接

可行解决方案 #

方案1：禁用Flipper并配置Chrome Debugger #

修改项目根目录下的android/app/src/main/java/com/[你的项目包名]/MainApplication.java文件：

1. 找到initializeFlipper相关代码块，注释或删除Flipper初始化逻辑
2. 添加Chrome Debugger启用代码（若未存在）：

import com.facebook.react.modules.debug.interfaces.DeveloperSettings;
// ...
@Override
public void onCreate() {
    super.onCreate();
    // 注释原Flipper初始化代码
    // initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    // 配置Chrome Debugger
    ReactInstanceManager reactInstanceManager = getReactNativeHost().getReactInstanceManager();
    DeveloperSettings devSettings = reactInstanceManager.getDevSupportManager().getDevSettings();
    devSettings.setDebuggerHost("localhost:8081");
    devSettings.setDebugEnabled(true);
}

修改完成后重新运行应用，再次尝试启动Chrome Debugger即可。

方案2：使用Hermes自带调试工具 #

React Native 0.73默认启用Hermes引擎，可直接使用其内置调试功能：

• 在模拟器中按下Ctrl+M，选择Debug with Hermes选项
• 系统会自动打开Chrome并进入Hermes调试界面，无需依赖Flipper，调试体验更稳定

方案3：安装Flipper（不推荐，因功能已废弃） #

若仍想通过Flipper进行调试：

1. 从官方渠道下载安装最新版本的Flipper
2. 确保系统已关联flipper://协议（部分系统需手动设置默认打开程序）
3. 重启应用和调试流程，Flipper会自动接管调试请求

方案4：使用React DevTools调试 #

1. 全局安装React DevTools：

npm install -g react-devtools

2. 在项目终端中运行react-devtools启动调试工具
3. 在模拟器中按下Ctrl+M，开启Enable Live Reload和Debug JS Remotely选项，即可在React DevTools中调试组件结构、状态及性能

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