react navite调试方案：Flipper、远程调试

如果你说的是 React Native 的调试方案：Flipper vs 远程调试（Remote Debugging），现在可以这样理解：

1. Flipper

Flipper 是 Facebook/Meta 生态下曾经非常常用的 RN 调试工具，主要能力包括：

查看 Console / Log
Network 请求查看
React DevTools
Layout Inspector
Redux 调试
AsyncStorage 查看
Native 端调试

但是需要注意：

新版本 React Native 已经不再把 Flipper 作为官方推荐的默认调试方案。

如果你的项目是比较老的 RN 项目，仍然可能看到：

复制代码

Flipper
├── React DevTools
├── Network
├── Logs
├── Layout Inspector
└── Redux

老项目里使用 Flipper 比较常见。

2. Remote Debugging

Remote Debugging 的核心思路是：

复制代码

React Native App
      ↓
JS 调试代码
      ↓
Chrome / 浏览器
      ↓
DevTools

以前 RN 经常通过：

复制代码

Debug JS Remotely

让 JS 运行在 Chrome 的 V8 环境中，然后通过调试协议与 RN 通信。

可以调试：

console.log
JavaScript 断点
查看变量
Call Stack
Network
JS Performance
Source Map

例如：

复制代码

function getUserInfo() {
  const user = {
    name: 'Tom',
    age: 27,
  };

  debugger;

  return user;
}

运行到：

复制代码

debugger;

之后，可以在 DevTools 中查看：

复制代码

user
├── name: "Tom"
└── age: 27

3. 两者最大的区别

可以简单理解成：

方案	主要作用	现在的情况
Flipper	RN + Native 综合调试	老 RN 项目常见
Remote Debugging	JS 调试	老版本 RN 常见
React Native DevTools	官方 JS 调试	现在更推荐
Android Studio	Android Native	Android 必备
Xcode	iOS Native	iOS 必备
Chrome DevTools	Web/JS 调试	主要用于 Web 或特定场景

4. 现在 React Native 更推荐什么？

如果你现在是 新项目 / RN 0.76+ / 新架构，我更建议：

复制代码

React Native DevTools
        +
Android Studio / Xcode
        +
console.log / debugger

而不是把 Flipper 和 Remote Debugging 当成核心调试方案。

典型结构：

复制代码

                React Native
                     │
          ┌──────────┴──────────┐
          ↓                     ↓
   React Native DevTools    Native Debugger
          │                     │
     JS / React             Android / iOS
          │                     │
     ┌────┴────┐          ┌─────┴─────┐
     │         │          │           │
  Console   Breakpoint Android      Xcode
             │         Studio
          Profiler

5. 如果你现在是在学习 React Native

我建议你按照这个顺序掌握：

第一阶段：JS 调试

复制代码

console.log()
console.warn()
console.error()
debugger

重点掌握：

Console
Sources
Breakpoint
Call Stack
Scope
Network

第二阶段：React 调试

掌握：

复制代码

React DevTools

重点看：

复制代码

Component
    ↓
props
state
hooks
render

例如：

复制代码

function UserCard({ user }) {
  const [loading, setLoading] = useState(false);

  return (
    <View>
      <Text>{user.name}</Text>
    </View>
  );
}

可以直接观察：

复制代码

UserCard
├── props
│   └── user
└── hooks
    └── loading

第三阶段：Native 调试

Android：

复制代码

Android Studio
Logcat
Debugger
Profiler
ADB

iOS：

复制代码

Xcode
Console
Debugger
Instruments

这一步非常重要，因为 RN 出问题不一定是 JS 的问题。

例如：

复制代码

JS
 ↓
Bridge / JSI
 ↓
Native Module
 ↓
Android / iOS

如果是：

复制代码

Camera
定位
蓝牙
推送
原生 SDK
原生崩溃

就需要进入 Native 调试。

6. 如果你维护的是老 RN 项目

如果你的项目里已经存在：

复制代码

react-native-flipper
FlipperKit
Flipper

那就需要根据 React Native 版本决定。

可以先执行：

复制代码

npx react-native --version

以及：

复制代码

npm list react-native

然后看：

复制代码

React Native 版本
        │
        ├── 老版本
        │      ↓
        │   Flipper / Remote Debugging
        │
        └── 新版本
               ↓
        React Native DevTools

不要为了使用 Flipper，专门给新 RN 项目降级或增加一堆 Flipper 依赖。

一句话总结

如果你是在整理 React Native 调试体系，可以记成：

Flipper 是过去 RN 很重要的综合调试工具；Remote Debugging 是过去常见的 JS 调试方式；对于现在的新 RN 项目，优先使用 React Native DevTools + Android Studio/Xcode。

如果你告诉我你目前用的是 React Native 哪个版本（比如 0.73、0.76、0.79、0.81） ，我可以直接给你整理一套对应版本的 完整调试方案 + 安装配置 + Chrome/Flipper/DevTools 的区别 + 常用快捷键。