Rozenite 是一个面向React Native DevTools的插件框架：安装官方插件即可在 DevTools 中获得 14 个开箱即用的调试面板，覆盖网络请求、Redux 状态、TanStack Query 缓存、SQLite 数据库、启动性能分析等场景——无需额外窗口、服务或浏览器标签页，几分钟内就能开始调试。

⚠️ Rozenite 及其官方插件目前处于 Beta 阶段，遇到问题欢迎提交 issue 或贡献修复。

为什么需要 Rozenite？

传统 React Native 调试的痛点：状态库有自己的 DevTools、网络请求要抓包、启动性能要手动埋点……工具分散、上下文反复切换。

Rozenite 的核心思路是把调试面板直接装进 React Native DevTools：

• 即插即用：npm install一个插件，对应面板自动出现在 DevTools 中
• 实时调试：网络、存储、性能数据随 App 使用实时更新
• 生产环境安全：插件在生产构建中自动禁用，不会有任何插件代码随包发布给用户
• 兼容主流工作流：支持 Expo 与 bare React Native，兼容 Metro 和 Re.Pack

快速上手：两条命令启动调试

第 1 步：一键初始化

在项目根目录运行 rozenite init，它会自动检测你的打包器（Metro / Re.Pack / rspeedy），安装对应包并改好配置：

npx rozenite@latest init

第 2 步：安装你想要的插件

插件作为 dev 依赖安装，以网络面板为例：

npm install -D @rozenite/network-activity-plugin

之后照常启动 App、打开 React Native DevTools，已安装插件的面板会自动出现，无需额外配置。

14个官方插件全清单

完整目录文档见 official-plugins/overview.mdx，插件索引见 plugin-directory.json。

重点插件详解

🌐 网络调试：Network Activity Inspector

React Native 版"Network 面板"：实时捕获 HTTP 与 WebSocket 流量，可查看请求头、响应体、状态码与耗时。支持react-native-nitro-fetch（Nitro 流量带Nitro来源标记），SDK 54+ 的 Expo 也会自动识别expo/fetch。

🗃️ 状态调试：Redux DevTools 与 TanStack Query

Redux DevTools面板可实时查看 store 状态、追踪带时间戳的 action 历史，并对比每个 action 引起的 state 变化：

TanStack Query面板支持查询与 mutation 的实时监控、缓存检查，还能直接执行 refetch / invalidate / reset，甚至主动触发 loading 与 error 状态做测试。

🧭 导航调试：React Navigation

针对 React Navigation v7 的完整调试工具：实时Action 时间线、任意时刻的State 检查、时间旅行（跳回历史导航状态），以及直接从 DevTools 测试深链。

🗄️ 数据调试：SQLite 与 Storage

SQLite 插件采用"查询优先"设计：浏览已注册数据库的表结构，直接执行 SQL。内置expo-sqlite适配器，也支持自定义适配任意 SQLite 类库。

Storage 插件用一个面板统一检查多种存储后端：MMKV、AsyncStorage、Expo SecureStore、react-native-keychain，各自通过适配器接入，还可用黑名单过滤敏感 key。

⚡ 性能分析：Performance Monitor 与 Require Profiler

Performance Monitor基于react-native-performance库，实时追踪你打的所有 marks、measures 和 metrics，支持会话管理与数据导出，专治"感觉卡但不知道卡在哪"。

Require Profiler在启动阶段给所有require()调用插桩，用火焰图展示模块依赖树耗时，配合"Top 模块表"和 require 链溯源，快速找出拖慢 Time to Interactive 的模块，发现代码分割/懒加载候选项。

🎨 UI 与表单：Overlay 与 React Hook Form

Overlay 插件提供可自定义的网格叠加与参考图叠加，支持滑动对比、contain/cover/stretch 多种对齐模式，还能直接粘贴剪贴板图片做比对——像素级还原设计的利器。

React Hook Form 插件把表单实时快照流式送到 DevTools：字段值（含嵌套路径）、校验错误、dirty/touched 标记与提交状态，表单再也不会是黑盒。

📦 其他值得一提的插件

• Expo Atlas：可视化 Metro 包体，发现大依赖与重复代码，优化 bundle 体积
• File System：浏览 document / cache / temp 等目录，内联预览文本与图片文件
• Feature Flags：支持自建 flag store、LaunchDarkly、Statsig，直接在 DevTools 强制覆盖开关值
• Controls：在设备端定义 sections 与 items，DevTools 端读取运行时值、翻转开关、提交输入、触发操作，告别"再写一个调试页"
• Expo Atlas 面板一览：

进阶：按需加载与 CLI 调试

只加载需要的插件

默认所有已安装插件都会加载。若只想启用部分，给withRozenite传include/exclude即可：

// metro.config.js module.exports = withRozenite(mergeConfig(defaultConfig, customConfig), { enabled: process.env.WITH_ROZENITE === 'true', include: ['@rozenite/storage-plugin', '@rozenite/network-activity-plugin'], });

用 CLI 从终端调试

除了 GUI 面板，Rozenite 还提供 CLI，通过npx rozenite agent ...在终端枚举 domain、调用工具，适合脚本化与自动化调试场景：

npx rozenite agent targets # 列出已连接设备 npx rozenite agent domains # 列出可用 domain npx rozenite agent console getMessages --levels error --limit 10

总结

Rozenite 用 14 个官方插件把 React Native 调试中最分散的工具统一进了 DevTools：

• 调试网络→ Network Activity
• 查状态→ Redux DevTools / TanStack Query / React Hook Form
• 查数据→ SQLite / Storage / File System
• 查性能→ Performance Monitor / Require Profiler / Expo Atlas
• 查 UI 与导航→ Overlay / React Navigation / Controls / Feature Flags

一行npx rozenite@latest init+ 一行npm install -D即可上手，生产构建自动禁用插件代码，放心集成。更多细节可阅读 官方插件总览 与 插件开发指南；如果 14 个插件都不满足需求，基于类型安全、同构的 API 自建插件也很简单。