2025年React Native Debugger最新安装指南：支持macOS、Linux与Windows

你是否还在为React Native开发中的调试问题烦恼？是否尝试过多种工具却仍未找到完美解决方案？本文将为你提供2025年最新的React Native Debugger安装指南，覆盖macOS、Linux和Windows三大操作系统，帮助你快速搭建高效的调试环境。读完本文，你将能够：

• 了解React Native Debugger的核心功能和优势
• 掌握在不同操作系统上的安装方法
• 学会配置和使用调试工具
• 解决常见的安装和使用问题

关于React Native Debugger

React Native Debugger是一个独立的应用程序，基于React Native官方调试器构建，集成了React Inspector和Redux DevTools。它提供了一站式的调试解决方案，帮助开发者更高效地调试React Native应用。

项目的核心功能包括：

• React组件检查
• Redux状态管理调试
• 网络请求监控
• 断点调试
• 性能分析

项目结构的主要部分：

• 主应用代码：app/
• Electron主进程：electron/
• 文档：docs/
• 脚本：scripts/

系统要求

在开始安装前，请确保你的系统满足以下要求：

• macOS: macOS 10.13或更高版本
• Linux: Ubuntu 18.04/Debian 10或更高版本
• Windows: Windows 10或更高版本，64位系统

安装方法

macOS

macOS用户有多种安装方式可选：

1. 下载预编译版本（推荐）

访问项目的发布页面，下载最新的macOS版本。下载完成后，将应用拖入Applications文件夹即可。

2. 使用Homebrew安装

如果你使用Homebrew，可以通过以下命令安装：

brew install --cask react-native-debugger

3. 从源码构建

如果你需要最新的开发版本，可以从源码构建：

git clone https://gitcode.com/gh_mirrors/re/react-native-debugger
cd react-native-debugger
yarn install
yarn pack-macos

构建完成后，你可以在release/目录下找到生成的应用。

Linux

Linux用户可以通过以下方式安装：

1. 下载预编译版本（推荐）

访问项目的发布页面，下载最新的Linux版本（.deb或.AppImage）。

对于.deb包（Debian/Ubuntu）：

sudo dpkg -i react-native-debugger_*.deb

对于.AppImage：

chmod +x react-native-debugger-*.AppImage
./react-native-debugger-*.AppImage

2. 从源码构建

git clone https://gitcode.com/gh_mirrors/re/react-native-debugger
cd react-native-debugger
yarn install
yarn pack-linux

构建脚本：scripts/package-linux.sh

Windows

Windows用户可以通过以下方式安装：

1. 下载安装程序（推荐）

访问项目的发布页面，下载最新的Windows安装程序（.exe），双击运行并按照安装向导操作。

2. 从源码构建

git clone https://gitcode.com/gh_mirrors/re/react-native-debugger
cd react-native-debugger
yarn install
yarn pack-windows

构建脚本：scripts/package-windows.sh

首次使用

安装完成后，启动React Native Debugger，你会看到如下界面：

基本配置

1. 确保所有React Native调试客户端都已关闭，通常是http://localhost:<port>/debugger-ui
2. 打开React Native Debugger，它会处于等待连接状态
3. 默认情况下，React Native Debugger会尝试连接端口为8081的调试代理
4. 如果你需要指定端口，可以创建新的调试窗口（macOS: Command+T, Linux/Windows: Ctrl+T）

连接应用

在你的React Native应用中，打开开发者菜单（通常是摇一摇设备或使用快捷键），然后选择"Debug JS Remotely"。此时，应用会自动连接到React Native Debugger。

通过命令行启动

你也可以通过命令行启动React Native Debugger并指定端口：

# macOS
open "rndebugger://set-debugger-loc?host=localhost&port=8081"

# Linux
xdg-open "rndebugger://set-debugger-loc?host=localhost&port=8081"

集成到开发工作流

你可以将React Native Debugger集成到你的开发工作流中，通过设置REACT_DEBUGGER环境变量：

REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=8081' ||" npm start

这样，当你启动React Native应用时，会自动打开React Native Debugger。

相关代码实现：npm-package/src/open.js

高级功能

Redux DevTools集成

React Native Debugger内置了Redux DevTools，使用方法与Redux DevTools Extension类似：

const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

详细文档：docs/redux-devtools-integration.md

网络请求监控

React Native Debugger集成了Chrome DevTools的网络监控功能，可以帮助你查看和调试网络请求。

详细文档：docs/network-inspect-of-chrome-devtools.md

快捷键

React Native Debugger提供了多种快捷键提高调试效率，常用的包括：

• Command+T (macOS) / Ctrl+T: 新建调试窗口
• Command+R (macOS) / Ctrl+R: 重新加载
• Command+F (macOS) / Ctrl+F: 搜索

完整快捷键列表：docs/shortcut-references.md

常见问题解决

无法连接到React Native应用

1. 确保React Native应用和Debugger使用相同的端口
2. 尝试重启React Native打包器和Debugger
3. 检查防火墙设置，确保端口没有被阻止

Redux DevTools不工作

1. 确保正确配置了Redux DevTools
2. 检查是否有多个Redux DevTools实例在运行
3. 尝试清除应用缓存

网络监控不显示请求

1. 确保在React Native应用中启用了网络监控
2. 检查是否使用了自定义的网络库，可能需要额外配置

更多故障排除技巧：docs/troubleshooting.md

自动更新

React Native Debugger支持自动更新功能。macOS用户会收到自动更新通知，Linux和Windows用户会看到新版本可用的对话框。

你也可以手动检查更新：

• macOS: 应用菜单 -> "Check for Updates..."
• Linux/Windows: "RND"菜单 -> "Check for Updates..."

更新配置文件：auto_updater.json

总结

React Native Debugger是React Native开发不可或缺的工具，它集成了多种调试功能，大大提高了开发效率。本文介绍了在不同操作系统上的安装方法和基本使用技巧，帮助你快速上手这个强大的调试工具。

如果你在使用过程中遇到任何问题，可以查阅官方文档或提交issue寻求帮助。

官方文档：docs/ 贡献指南：docs/contributing.md

希望本文对你有所帮助，祝你的React Native开发之旅愉快！