React Native Debugger MAC 版
用于调试 React Native 应用的免费开源独立应用,内置 React Inspector、Redux DevTools 和 Apollo Client DevTools。仅支持 Remote Debugger。
React Native Debugger 简介
React Native Debugger 是一款用于调试 React Native 应用的免费开源独立应用。它基于官方 Remote Debugger 并增加了更多功能,把 React Inspector、Redux DevTools 和 Apollo Client DevTools 集中在一个窗口中。使用时,打开应用,确保其他调试客户端已关闭,然后在你的应用开发者菜单中开启 Debug JS Remotely。
React Native Debugger 由 Jhen-Jie Hong 开发,以 MIT 许可证发布。它有一个重要限制:只支持旧版 Remote Debugger,不支持 Hermes、JSI 和 New Architecture,而且 0.14.0 之后没有发布新版本。请先确认它适合你的项目。0.11 及更高版本需要 react-native 0.62 或更高版本。0.14.0 版是适用于 Intel 和 Apple Silicon 的通用应用,需要 macOS 10.13 或更高版本,基于 Electron 25。
主要功能
React Native Debugger 把 React Native 的主要调试工具集中在一个应用中。
- 远程调试:基于官方 Remote Debugger,并增加更多功能。
- React Inspector:内置自 react-devtools-core。
- Redux DevTools:已内置,API 与 redux-devtools-extension 相同。
- Apollo Client DevTools:作为 devtools 扩展内置。
- 网络检查:用 Chrome Developer Tools 检查网络流量。
- 调试窗口:按 Command+T 打开新窗口并设置所需端口。
- 通过 URI 启动:用 rndebugger: 协议从命令行启动。
- 配置文件:把设置保存在主文件夹中的文件里。
0.14.0 版本新功能
React Native Debugger 0.14.0 更新了核心组件并改进了表单。
- 现在可以在表单中按 Enter 键
- 升级到 Electron 25
- react-devtools-core 升级到 4.28.0,并修复一个 source map 警告
- redux-devtools 升级到最新版本
- apollo-client-devtools 升级到版本 4
- Open in Editor 不再检查主机
React Native Debugger 常见问题
React Native Debugger 免费吗?
是的。它是免费开源软件,采用 MIT 许可证。
React Native Debugger 支持 Hermes 或 New Architecture 吗?
不支持。它只支持旧版 Remote Debugger。0.14.0 版不包含对 Hermes、JSI 和 New Architecture 的支持。
需要什么版本的 React Native?
React Native Debugger 0.11 及更高版本需要 react-native 0.62 或更高版本。较旧的项目可使用 0.10 版,它适用于 react-native 0.61 及更早版本。
需要什么版本的 macOS?
0.14.0 版需要 macOS 10.13 或更高版本。
能在 Apple Silicon 上运行吗?
能。Mac 下载包是适用于 Apple Silicon 和 Intel 的通用应用。
如何连接我的应用?
关闭其他调试客户端,打开 React Native Debugger,然后在你的应用开发者菜单中开启 Debug JS Remotely。
它使用哪个端口?
默认通过 8081 端口连接调试代理。按 Command+T 打开新窗口可设置其他端口。
包含哪些工具?
包含 React Inspector、Redux DevTools 和 Apollo Client DevTools。
可以用 Homebrew 安装吗?
可以。运行:brew install --cask react-native-debugger
react-native-debugger.FULLMAC.app 上的 React Native Debugger 下载来自哪里?
下载按钮会转到 React Native Debugger 官方发布页面 https://github.com/jhen0409/react-native-debugger/releases/latest。react-native-debugger.FULLMAC.app 不会修改或重新打包该应用。
相似应用
OrbStackOrbStack 是在 Mac 上运行 Docker 容器和 Linux 虚拟机的快速、轻量又简单的方式。它可以直接替代 Docker Desktop:你的 docker 和 docker compose 命令照常可用,首次启动时 OrbStack 还会提出迁移 Docker Desktop 中的容器、镜像和卷。它几秒钟即可启动,在 Apple 芯片上的后台 CPU 占用低于 0.1%,并会把未使用的内存还给 macOS。除了容器,它还能运行来自 16 种发行版的完整 Linux 虚拟机,以及用于本地开发的轻量 Kubernetes 集群。OrbStack 由 Orbital Labs 开发。开发工具
QuotaBar如果你用 ChatGPT 账户使用 OpenAI Codex,用量限制会按 5 小时窗口和每周窗口重置,想知道还剩多少就得打开 Codex 或 ChatGPT。QuotaBar 把剩余百分比显示在 Mac 菜单栏中,每 60 秒刷新一次。点击图标可打开详细面板,查看每个限制窗口及其重置倒计时;也可以打开一个始终置顶的小型悬浮 HUD。开发工具
Stargazer BarStargazer Bar 是一款小巧的 Mac 原生菜单栏应用,帮你盯着 GitHub 仓库。它在菜单栏中实时显示星标数,不用一直开着浏览器标签页也能知道项目的情况;点击即可打开详情菜单:星标与 Fork 趋势图、发布版下载总数以及维护者雷达。公开仓库以星标数衡量。私有仓库没有星标,则以需要你处理的事项衡量:构建失败、未回复的 Issue 或新的拉取请求。开发工具
Notch So GoodNotch So Good 把 MacBook 的刘海变成 AI 编程代理的小型状态显示屏。当 Claude Code 或 OpenAI Codex CLI 工作时,一个黑色胶囊会延伸刘海:左边是名为 Peek 的 3D 角色,右边的圆环显示 5 小时用量窗口还剩多少。会话越需要你,Peek 就从刘海里探出得越多。当任务完成、失败或达到用量上限时,刘海会展开成一张卡片,说明发生了什么、在哪个项目里,点击即可跳到对应的终端标签页,包括 tmux 窗格。开发工具
Claude UsageClaude Usage 是一款为 Claude Code 用户打造的小巧原生应用。它在菜单栏中显示当前的 5 小时会话、所有模型和 Sonnet 的每周用量,以及按量付费的额度,每项都带有用量条和重置时间,无需打开 Claude Code。它还会在 Claude Code 提示符下方添加一行,显示模型、上下文窗口的占用比例和已用令牌数,让你在空间耗尽之前压缩会话。每个终端窗格都显示自己的这一行,在 tmux 中也一样。开发工具
TintpadTintpad 是一款免费开源的启动器,面向使用 Claude Code、Codex 等命令行编程代理的开发者。在任意位置按下 Option-Command-空格,一滴黑色的“水滴”会从 Mac 的刘海处落下(没有刘海的 Mac 则悬挂在菜单栏下方),里面列出你的代码仓库。输入几个字母并按下 Return,你自己的终端就会在该仓库中打开,代理已按你上次在那里使用的模式运行。开发工具
FULLMAC.app 不托管此应用。下载按钮会将你带到开发者自己的页面。