react native怎么调试

在 React Native（RN）里调试方式很多，按开发阶段 / 场景来分最清晰。下面给你一份实用指南（含 iOS / Android）。

一、最常用：开发者菜单 + 热重载

打开开发者菜单

• iOS 模拟器：Cmd + D
• Android 模拟器：Cmd + M（Mac） / Ctrl + M（Win）
• 真机：摇一摇手机

常用功能：

• Reload（重新加载）
• Enable Fast Refresh（热更新）
• Debug（打开调试工具）
• Show Performance Monitor（性能监控）

二、控制台日志调试（最基础）

console.log('debug info', data)

查看位置：

• Metro 终端（运行 npx react-native start 的窗口）
• 浏览器 DevTools
• Android Studio / Xcode 控制台

三、使用浏览器调试（JS 层）

旧方式（Remote JS Debugging）⚠️ 新版本已废弃

• 开发者菜单 → Debug
• 打开 http://localhost:8081/debugger-ui

新方式：React Native DevTools（推荐 ✅）

RN 0.73+ 内建：

• 开发者菜单 → Open JS Debugger
• 使用 Chrome DevTools
• 支持：
  • 断点
  • 网络请求
  • Source Map
  • React 组件树

四、React 组件调试（最重要）

React DevTools

npm install -g react-devtools
react-devtools

可以看到：

• 组件层级
• props / state
• 重新渲染原因

五、原生层调试（iOS / Android）

iOS

• 用 Xcode 打开 ios/ 工程
• 设断点（Objective-C / Swift）
• 看崩溃日志

Android

• 用 Android Studio
• Logcat 过滤 ReactNative / JS

六、网络请求调试

方法 1：Flipper（官方推荐 ✅）

npx react-native start
# Flipper 自动连接

功能：

• Network
• Layout
• Database
• Logs

方法 2：代理工具

• Charles
• Fiddler
• Proxyman

七、性能调试

• Performance Monitor（开发者菜单）
• Flipper → Performance
• React Profiler
• Xcode Instruments（iOS）

八、常见调试技巧

✅ 红屏错误：看最上面一行
✅ 白屏：清缓存

npx react-native start --reset-cache

✅ 真机连不上：

adb reverse tcp:8081 tcp:8081

九、推荐调试组合（实战）

RN + TypeScript 项目

• Fast Refresh
• React DevTools
• Flipper
• console.log（临时）

如果你愿意，可以告诉我：

• RN 版本
• 是 iOS / Android / 双端
• 遇到什么具体问题（白屏 / 红屏 / 网络 / 性能）

我可以直接给你对应解决方案。