React Native DevTools 完全指南 2026

Q: 在 Expo Go 里能用 React Native DevTools 吗？

可以，Expo Go SDK 51+ 内置了 dev-client 通道，按 j 键会正常打开。但 Expo Go 无法加载自定义原生模块，如果你要调试 expo-notifications 或 react-native-vision-camera ，需要先跑 EAS Dev Build。

Q: Redux DevTools 和 React Query DevTools 如何在新工作流里用？

Redux 推荐 redux-devtools-expo-dev-plugin （Expo 项目）或 @redux-devtools/extension 走 Chrome Extension；TanStack Query 提供 @tanstack/react-query-devtools 的 RN 版本，通过内嵌浮层展示查询状态，不需要外部窗口。

更新于：2026 年 8 月 30 日

React Native DevTools 是 React Native 0.76+ 内置的默认调试器，基于 Chrome DevTools 前端，并通过 CDP（Chrome DevTools Protocol）直连 Hermes 引擎，替代了在 0.73 版本被弃用的 Flipper 桌面客户端。它支持源码断点、组件树检查、网络抓包与 CPU/内存剖析，不需要再安装 Java 桌面应用或额外插件；在 Metro 终端按 j 键就能打开，跟 Expo dev-client、iOS 与 Android 真机全兼容。老实说，这套新工具链比 Flipper 顺手太多了。本文按迁移路径、调试面板、真机排错、性能剖析一步步展开，覆盖我在生产项目里踩过的所有坑。

Flipper 桌面客户端在 React Native 0.73 已从模板中移除，官方推荐迁移到 React Native DevTools；旧 Flipper 插件在新架构（Bridgeless）下不再工作。
React Native DevTools 通过 j 键在 Metro 中唤起，前端是 Chrome DevTools Frontend，后端通过 CDP 直连 Hermes，不再需要 USB 桥接工具。
Sources 面板支持 Hermes 源码断点、条件断点、Blackboxing，Components 面板等价于 React DevTools，Profiler 面板可采集火焰图。
Network 面板依赖 fetch/XMLHttpRequest 的 CDP 桥接；从 0.76 开始默认启用，替代了 Flipper Network Plugin。
Expo SDK 51+ 全面兼容 React Native DevTools，且 EAS Dev Build 已内置 debugger 通道，不需要额外配置。
对于生产构建的性能问题，仍需结合 Hermes Sampling Profiler、Perfetto/Instruments 使用；DevTools 只覆盖 dev 阶段。

Flipper 为什么被弃用？

Flipper 是 Facebook 在 2018 年发布的桌面调试平台，通过 Java/Kotlin 桌面客户端和 RN 侧的原生桥接与 App 通信。它承载了网络抓包、Layout Inspector、Redux DevTools、Databases 等插件生态，一度是 RN 调试的默认答案。但从 2023 年下半年起，Meta 的 RN 团队在 RFC 0641 中提出解绑 Flipper，理由主要有三点。

第一，Flipper 的原生桥接依赖旧架构（Bridge）的消息通道，新架构（Bridgeless）落地后，很多 Flipper 插件无法工作，维护成本呈指数级上升。第二，桌面客户端需要单独安装 JDK 与 OpenSSL，且在 Apple Silicon 与 Windows ARM 上兼容性差，很多团队反馈「打不开 Flipper」是新人上手的第一个障碍。第三，Meta 已经将主力调试体验押注在 Hermes + CDP 上，Chrome DevTools 前端天然支持源码断点、Profiler 与 Network，重新造轮子毫无意义。

从 React Native 0.73 开始，模板中的 Flipper 集成被移除；到 0.76，React Native DevTools 成为 Metro 的默认调试入口。旧版 flipper-plugin-react-devtools 等第三方插件已不再维护，如果你的项目还在用 Flipper，本文的迁移清单会给出替代方案。

如何打开 React Native DevTools？

最快的方式：在 Metro 服务器的终端窗口按 j 键。Metro 会通过 chrome-devtools-frontend 打开一个新的 Chrome 标签页（或独立 Chromium 窗口），后端通过 ws://localhost:8081/inspector 连接到当前活跃的 JS Runtime（Hermes 实例）。整个过程不需要登录，也不需要装任何桌面应用。

# 启动 Metro
npx react-native start

# 或使用 Expo
npx expo start --dev-client

# 在终端按下：
# r  → reload
# d  → open dev menu
# j  → open React Native DevTools    ← 我们要的

如果 j 键没反应，通常是三种情况：Metro 版本过旧（< 0.76）、App 用的是 JSC 而非 Hermes、或同时有多个 App 连接导致选择器弹窗。前两种升级依赖即可，第三种会在浏览器打开一个连接选择页，点选你要调试的 App 名称。

从 Flipper 迁移的完整清单

我在上一个项目里带队做过一次全量迁移，涉及 40+ 个 Flipper 插件替换。总结成下表，覆盖 90% 的场景。

Flipper 插件	React Native DevTools 替代	迁移难度
Network Plugin	Network 面板（内置 CDP 桥接）	低（自动生效）
React DevTools	Components 面板 + Profiler 面板	低（内置）
Layout Inspector	Elements 面板 + `react-native-inspector`	中
Databases	需迁移到 `op-sqlite` 的 CLI 或 Reactotron	高
Redux Debugger	Redux DevTools Extension（Chrome）或 `redux-devtools-expo-dev-plugin`	中
Crash Reporter	Sentry / Firebase Crashlytics	低（本就该独立）
Images Plugin	Expo Dev Tools UI + Performance Tab	中

操作层面，迁移分三步：第一步是从 Podfile 与 android/app/build.gradle 移除 Flipper 相关依赖与 use_flipper!() 调用；第二步升级 react-native 到 0.76 或更高，Metro 与 @react-native/dev-middleware 会自动带上 DevTools；第三步在 CI 中删除 Flipper 缓存路径，避免历史 pod 复用。完整的 Podfile diff 可参考 RN Upgrade Helper。

在 Hermes 中设置断点与源码调试

React Native DevTools 的 Sources 面板与 Chrome 完全一致：Cmd+P 快速打开文件，行号左侧点击加断点，右键行号可加条件断点（比如 userId === 42），支持 Logpoint（不中断执行、只打 log）与 Blackboxing（跳过 node_modules）。

// 假设我们在 CheckoutScreen.tsx 里排查一个金额格式化 bug
function CheckoutScreen({ order }: Props) {
  // 在这一行右键 → Add conditional breakpoint
  // 条件：order.total > 999.99
  const formatted = formatCurrency(order.total, order.currency);

  return <Text>{formatted}</Text>;
}

// 配合 Watch 表达式（右侧面板）：
// - order.currency
// - Number(order.total).toFixed(2)
// - typeof order.total   ← 检查是否是字符串

Hermes 的 Source Map 会自动通过 Metro 提供，行号和列号都对齐到 TypeScript 源码，不需要再像 JSC 时代那样手动 --reset-cache。如果你发现断点飘到 bundle 里的错误位置，八成是 metro.config.js 里禁用了 sourceMaps，检查 transformer.enableBabelRuntime 与 serializer.customSerializer。

Console 面板同样等价于 Chrome：支持 console.log/warn/error、Live Expression、对象展开与 copy(obj) 复制到剪贴板。console.log(perf) 打印 Performance 对象时，可以直接看到 performance.now() 的时间轴数据。

Components 与 Profiler 面板实战

Components 面板即传统 React DevTools 的组件树视图，Profiler 面板则是采样式的渲染时间线。二者共同用于回答两个问题：这次重渲染是谁触发的？ 与 这个组件为什么慢？

典型的排查流程：先在 Components 面板打开「Highlight updates when components render」，滑动列表触发 rerender，屏幕上会闪出黄色/绿色的 outline。绿色代表快速渲染（< 16ms），黄色代表接近 60fps 边界，红色代表 jank。看到红色框后切到 Profiler 面板，点录制、复现操作、停止录制。火焰图里横向宽度代表耗时，纵向层级代表 React 树深度。

// 常见的性能反模式：父组件每次都传入新对象
function List({ items }: { items: Item[] }) {
  return items.map((it) => (
    // ❌ style 每次都是新引用，破坏 memo
    <Row key={it.id} item={it} style={{ paddingHorizontal: 16 }} />
  ));
}

// ✅ 提取常量（Profiler 里 Row 的重渲染次数会从 N 降到 1）
const rowStyle = { paddingHorizontal: 16 };
function List({ items }: { items: Item[] }) {
  return items.map((it) => <Row key={it.id} item={it} style={rowStyle} />);
}

Profiler 面板的「Ranked」视图按耗时降序排列组件，最能一眼看到瓶颈；「Flame」视图保留了组件树结构，便于理解上下文。如果你想深入列表虚拟化的原理，可以参考我之前写的FlatList vs FlashList v2 vs LegendList 对比，那里详细分析了 renderItem 的 memo 策略。

Network 面板：抓包、Header 与响应体

Network 面板是 Flipper 用户迁移后最惊喜的部分：不需要额外插件，App 里所有 fetch、XMLHttpRequest，以及大部分基于它们的库（axios、Apollo、TanStack Query）都会自动出现在面板中。CDP 层实现见 react-native dev-middleware 源码。

面板支持完整的 Chrome Network 功能：按类型过滤（XHR/Fetch/Image）、按状态码过滤（4xx/5xx）、按域名过滤、查看 Request/Response Headers、Preview JSON 响应、Copy as cURL、Save as HAR。对于 GraphQL 请求，Preview 会自动格式化，非常适合排查 persistedQuery 命中失败等问题。

// 在 axios 里显式打 Request ID，DevTools Network 面板会显示
import axios from 'axios';

axios.interceptors.request.use((config) => {
  config.headers['X-Request-ID'] = crypto.randomUUID();
  return config;
});

// 之后在 Network 面板 → Headers → Request Headers 里
// 就能看到 X-Request-ID: 550e8400-...
// 联调时把这个 ID 发给后端同学即可对齐日志

性能剖析：CPU、内存与 Hermes Sampling

React Native DevTools 提供的 Performance 面板与浏览器 Chrome 略有不同，它专门针对 Hermes 做了裁剪，只包含 JS 执行时间线，不包含渲染层（Layout/Paint）。原因很简单：RN 的渲染发生在 Fabric（新架构）或 Paper（旧架构）线程，不在 JS 侧，DevTools 抓不到。

典型工作流：Performance 面板 → 点录制按钮 → 在 App 里复现慢操作（比如打开一个大列表） → 停止录制。你会看到一个包含 JS 函数调用栈的火焰图，可以定位到具体是哪个 reduce、JSON.parse 或第三方库耗时最久。

// 手动埋点，让 Performance 时间线有明确 marker
import { InteractionManager } from 'react-native';

async function loadDashboard() {
  performance.mark('dashboard:start');

  const data = await fetchDashboard();       // 网络
  performance.mark('dashboard:fetched');

  const parsed = normalizeData(data);         // CPU
  performance.mark('dashboard:parsed');

  await InteractionManager.runAfterInteractions(() => {
    setDashboard(parsed);
  });
  performance.mark('dashboard:rendered');

  performance.measure('total', 'dashboard:start', 'dashboard:rendered');
}

对于 Release 构建的性能问题（DevTools 抓不到），需要 Hermes Sampling Profiler：在 Dev Menu 里点「Enable Sampling Profiler」，操作、停止后会在 /sdcard 或应用 Documents 目录生成 .cpuprofile，用 reactnative.dev/docs/profile-hermes 提供的 compare-source-maps 转换后，用 Chrome DevTools 的 Performance 面板导入即可。冷启动与 TTI 的深度剖析我在启动性能优化指南里给了完整方案。

Expo 与 EAS Dev Build 中的调试差异

Expo SDK 51+ 完全兼容 React Native DevTools，Expo CLI 会在 j 键按下时启动内置的 DevTools 通道。EAS Dev Build（也叫 Development Build）与 Expo Go 略有不同：Dev Build 是你自己的项目加 expo-dev-client，装到真机后连接的是本地 Metro，DevTools 完全可用；Expo Go 是共享的容器 App，也支持但不能加载原生模块，因此 expo-notifications 之类需要 Dev Build 才能完整调试。

# 安装 dev-client，生成本地 dev build 并跑起来
npx expo install expo-dev-client
npx expo run:ios         # 或 run:android
# 之后启动 Metro
npx expo start --dev-client
# 在 Metro 终端按 j，即可打开 DevTools

Expo 还提供了额外的 Dev Plugins 机制。举个例子，@dev-plugins/react-navigation 会在 DevTools 里增加一个 React Navigation 面板，可视化整个导航栈与参数变化。这一点弥补了 Flipper 生态里 flipper-plugin-react-navigation 消失的空白，对于 Expo Router 项目尤其好用（详见我的Expo Router v6 完全指南）。

常见问题排查：连不上、面板空白、真机白屏

按我在多个项目里踩过的顺序，最常见的坑列在下面。

1. 按 j 没反应或浏览器打不开

确认 Metro 版本 >= 0.76，用 npx react-native info 检查。如果版本对但仍不响应，检查 metro.config.js 是否覆盖了 server.enhanceMiddleware。旧模板里的这段代码会阻断 dev-middleware 注册 DevTools 路由。

2. DevTools 打开了但看不到我的 App

页面会显示「No devices connected」。原因通常是 App 用的是 JSC 而非 Hermes。在 android/app/build.gradle 里检查 hermesEnabled=true，iOS 检查 Podfile 中 :hermes_enabled => true。JSC 项目只能用旧版的 chrome://inspect Legacy Debugger，且 2026 年基本已淘汰。

3. 断点命中，但源码显示 bundle 而非 TS 文件

Source Map 未加载。清理缓存：rm -rf $TMPDIR/metro-*，然后 npx react-native start --reset-cache。极少数情况下是 babel.config.js 里配置了 sourceMaps: false。

4. Network 面板不显示任何请求

大概率你在项目里 monkey-patch 了 global.fetch，比如某些老旧的日志库。DevTools 的桥接是在原生 fetch 之上包一层，如果 global.fetch 被替换成完全自定义实现，桥接就失效。解决办法：在自定义 fetch 里再委托原始 fetch，或者删除 monkey patch。我上一个项目就在这里卡了半天，最后发现是一个内部日志库偷偷替换了全局 fetch。

5. 真机 iOS 15+ 上白屏，Metro 连接失败

iOS 14+ 起 App Transport Security 默认拒绝 HTTP 明文，Debug 构建里 Metro 的 localhost:8081 走的是 HTTP。检查 Info.plist 中的 NSAllowsLocalNetworking 是否为 true。RN 0.76 模板默认已加上，但从旧模板升级过来的项目常缺失这项。若你在做原生模块桥接（可以参考新架构 TurboModules 指南），还需要确认 RCT_DEV=1 编译宏没被误关。

常见问题

React Native DevTools 支持在真机上调试吗？

支持。真机通过 USB 或同一局域网 WiFi 连接开发机，只要 App 能加载 Metro 的 bundle，DevTools 就能通过 CDP 连接到 App 内的 Hermes 实例，与模拟器体验一致。

Flipper 完全不能用了吗？还有替代方案吗？

Flipper 桌面客户端本身仍可下载，但 React Native 0.73+ 模板不再集成，且新架构下大部分插件已失效。生产项目建议全量迁移到 React Native DevTools 加 Sentry/Reactotron 组合，Reactotron 保留了 Redux State Inspector 与 Timeline 等 Flipper 独有能力。

DevTools 能调试 Release 构建吗？

不能。React Native DevTools 依赖 Metro 与 Hermes 的 dev 通道，Release 构建不包含 RCT_DEV 相关代码。Release 构建的性能问题请用 Hermes Sampling Profiler，崩溃排查请用 Sentry 或 Firebase Crashlytics。

在 Expo Go 里能用 React Native DevTools 吗？

可以，Expo Go SDK 51+ 内置了 dev-client 通道，按 j 键会正常打开。但 Expo Go 无法加载自定义原生模块，如果你要调试 expo-notifications 或 react-native-vision-camera，需要先跑 EAS Dev Build。

Redux DevTools 和 React Query DevTools 如何在新工作流里用？

Redux 推荐 redux-devtools-expo-dev-plugin（Expo 项目）或 @redux-devtools/extension 走 Chrome Extension；TanStack Query 提供 @tanstack/react-query-devtools 的 RN 版本，通过内嵌浮层展示查询状态，不需要外部窗口。