【免费下载链接】rozenitePlug-and-play panels for React Native DevTools. Install, enable, and start debugging in minutes.项目地址https://gitcode.com/gh_mirrors/ro/rozenite点击查看免费下载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 rozenitelatest init第 2 步安装你想要的插件插件作为 dev 依赖安装以网络面板为例npm install -D rozenite/network-activity-plugin之后照常启动 App、打开 React Native DevTools已安装插件的面板会自动出现无需额外配置。14个官方插件全清单#插件npm 包面板功能源码位置1Network Activityrozenite/network-activity-pluginChrome DevTools 风格的 HTTP/WebSocket 网络面板packages/network-activity-plugin/2Redux DevToolsrozenite/redux-devtools-pluginRedux 状态、action 历史与 state diffpackages/redux-devtools-plugin/3TanStack Queryrozenite/tanstack-query-plugin查询/变更实时监控与缓存管理packages/tanstack-query-plugin/4React Navigationrozenite/react-navigation-plugin导航时间线、状态检查与深链测试packages/react-navigation-plugin/5SQLiterozenite/sqlite-plugin浏览数据库表、执行 SQL 查询packages/sqlite-plugin/6Storagerozenite/storage-pluginMMKV / AsyncStorage / SecureStore 统一检查packages/storage-plugin/7Feature Flagsrozenite/feature-flags-plugin查看并强制覆盖特性开关packages/feature-flags-plugin/8Performance Monitorrozenite/performance-monitor-plugin实时性能 marks / measures / metricspackages/performance-monitor-plugin/9Require Profilerrozenite/require-profiler-plugin启动期require()调用火焰图packages/require-profiler-plugin/10Expo Atlasrozenite/expo-atlas-pluginMetro 包体可视化定位大依赖与重复代码packages/expo-atlas-plugin/11File Systemrozenite/file-system-plugin浏览 App 目录、预览文本/图片文件packages/file-system-plugin/12Overlayrozenite/overlay-plugin网格与参考图叠加像素级 UI 比对packages/overlay-plugin/13React Hook Formrozenite/rhf-plugin表单字段值、校验错误与提交状态packages/rhf-plugin/14Controlsrozenite/controls-plugin自定义开关、输入与按钮的调试面板packages/controls-plugin/完整目录文档见 official-plugins/overview.mdx插件索引见 plugin-directory.json。重点插件详解 网络调试Network Activity InspectorReact Native 版Network 面板实时捕获 HTTP 与 WebSocket 流量可查看请求头、响应体、状态码与耗时。支持react-native-nitro-fetchNitro 流量带Nitro来源标记SDK 54 的 Expo 也会自动识别expo/fetch。️ 状态调试Redux DevTools 与 TanStack QueryRedux DevTools面板可实时查看 store 状态、追踪带时间戳的 action 历史并对比每个 action 引起的 state 变化TanStack Query面板支持查询与 mutation 的实时监控、缓存检查还能直接执行 refetch / invalidate / reset甚至主动触发 loading 与 error 状态做测试。 导航调试React Navigation针对 React Navigation v7 的完整调试工具实时Action 时间线、任意时刻的State 检查、时间旅行跳回历史导航状态以及直接从 DevTools 测试深链。️ 数据调试SQLite 与 StorageSQLite 插件采用查询优先设计浏览已注册数据库的表结构直接执行 SQL。内置expo-sqlite适配器也支持自定义适配任意 SQLite 类库。Storage 插件用一个面板统一检查多种存储后端MMKV、AsyncStorage、Expo SecureStore、react-native-keychain各自通过适配器接入还可用黑名单过滤敏感 key。⚡ 性能分析Performance Monitor 与 Require ProfilerPerformance Monitor基于react-native-performance库实时追踪你打的所有 marks、measures 和 metrics支持会话管理与数据导出专治感觉卡但不知道卡在哪。Require Profiler在启动阶段给所有require()调用插桩用火焰图展示模块依赖树耗时配合Top 模块表和 require 链溯源快速找出拖慢 Time to Interactive 的模块发现代码分割/懒加载候选项。 UI 与表单Overlay 与 React Hook FormOverlay 插件提供可自定义的网格叠加与参考图叠加支持滑动对比、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 与 itemsDevTools 端读取运行时值、翻转开关、提交输入、触发操作告别再写一个调试页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 rozenitelatest init 一行npm install -D即可上手生产构建自动禁用插件代码放心集成。更多细节可阅读 官方插件总览 与 插件开发指南如果 14 个插件都不满足需求基于类型安全、同构的 API 自建插件也很简单。赞分享【免费下载链接】rozenitePlug-and-play panels for React Native DevTools. Install, enable, and start debugging in minutes.项目地址https://gitcode.com/gh_mirrors/ro/rozenite点击查看免费下载相关推荐Resource Override插件3个必学技巧让网站调试效率翻倍Resource Override插件3个必学技巧让网站调试效率翻倍 还在为网站调试而烦恼吗Resource Override这款浏览器插件能帮你彻底掌控任5个Reactotron插件让调试效率提升10倍5个Reactotron插件让调试效率提升10倍 你是否还在为React Native应用中的状态追踪、API调试和错误定位而头疼尝试过多种工具却依然效率低开发工具awesome-ontology 工具清单ROBOT、WebVOWL 等 14 个本体工程利器让开发效率翻倍awesome ontology 工具清单ROBOT、WebVOWL 等 14 个本体工程利器让开发效率翻倍 awesome ontology 是一个精心整知识图谱文档知识库上一篇ScyllaDB CQL INSERT 语句完全指南语法、时间戳冲突与条件写入实战下一篇OpenSandbox Code Interpreter Python SDK 实战多语言安全沙箱代码执行完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考