开发工具移动开发桌面应用【免费下载链接】react-native-debuggerThe standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools项目地址https://gitcode.com/gh_mirrors/re/react-native-debugger点击查看免费下载导读React Native Debugger 是一款基于 React Native 官方远程调试器Remote Debugger构建的独立桌面调试应用内置 React Inspector、Redux DevTools 与 Apollo Client DevTools。本文以官方 Getting Started 文档 为骨架结合仓库源码electron/、npm-package/深入讲解从安装到接入的完整链路如何让应用连上调试器、如何通过rndebugger://URI scheme 与REACT_DEBUGGER环境变量由 packager 自动拉起调试窗口、如何利用react-native-debugger-open一键替换 Chrome debugger-ui以及如何以 Redux DevTools Extension 兼容 API 在项目里开启状态调试。读完本文你将能独立完成 React Native 项目的调试环境搭建并理解其底层连接机制。一、开箱即用的快速开始原文档给出的起步流程只有四步但每一步背后都有明确的调试链路下面结合源码逐一说明。安装最新版本从项目 release 页面下载对应平台的预编译安装包macOS 可通过 Homebrew Cask 安装brew install --cask react-native-debuggerArch 系 Linux 可通过 AUR 的react-native-debugger-bin安装安装细节可参考 README.md。关闭所有 React Native 调试客户端通常指http://localhost:port/debugger-ui页面。这是因为 RNDebugger 需要独占调试代理debugger proxy的连接Chrome 的 debugger-ui 若仍开着会抢占连接导致新调试器无法生效。保持 RNDebugger 打开并等待状态应用启动后会在后台监听连接请求详见下文端口文件机制。指定端口连接调试代理RNDebugger 默认尝试连接 React Native packager 的8081端口若你自定义了 packager 端口可以新建调试窗口macOSCommandTLinux/WindowsCtrlT来指定端口。从 main.js 可以看到新建窗口时传入isPortSettingRequired: true即要求用户手动填写端口而应用启动时则依据配置中的defaultRNPackagerPorts默认[8081]自动创建窗口main.js。在 App 中开启Debug JS Remotely通过应用内开发者菜单developer menu打开远程调试开关应用内的 JS 执行便会切换到调试代理RNDebugger 随即接管。提示当前版本仅支持 React Native 的旧版远程调试器Remote Debugger / Chrome DevTools 方案Hermes / JSI / 新架构New Architecture不在支持范围内详见 README.md 顶部的兼容性说明。二、通过 CLI 或 React Native packager 启动2.1rndebugger:URI schemeRNDebugger 注册了自定义 URL schemerndebugger:通过一条命令即可携带 host / port 参数拉起应用适用于 macOS / Linux# macOS $ open rndebugger://set-debugger-loc?hostlocalhostport8081 # Linux $ xdg-open rndebugger://set-debugger-loc?hostlocalhostport8081这里的host/port指的是 React Native packager 的地址与端口默认8081如果你自定义了 packager 端口需要同步修改port参数。底层解析逻辑handleURL.js应用收到rndebugger://set-debugger-loc?...后会解析出三个字段参数解析规则host为空、undefined或null时回退为localhostport通过Number(port)转换非法值回退为8081projectRoots可选过滤出真实存在的目录列表用于 source map 定位随后通过 handleURL 将序列化后的配置写入process.env.DEBUGGER_SETTING再交给窗口处理若已存在匹配端口且空闲的窗口则直接复用并发送set-debugger-locIPC 事件否则创建新窗口。三条接收路径对应不同平台与启动时机macOS 的open-url事件应用已运行时系统把rndebugger://链接路由到事件处理器应用未运行时macOS 会先拉起应用再触发该事件因此 macOS 上可做到未打开也能自动启动handleURL.js。本地 TCP 服务应用启动时会监听一个127.0.0.1上的随机端口接收{ path: rndebugger://... }格式的 JSON 请求并返回success/failhandleURL.js。该端口会写入$HOME/.rndebugger_port文件Windows 为%USERPROFILE%\.rndebugger_port供外部工具如react-native-debugger-open读取见 port.js。Linux 的second-instance命令行动参数Linux 下应用通过requestSingleInstanceLock()保证单实例后续实例的命令行参数含rndebugger://链接会被转发给首个实例处理main.js。2.2 通过REACT_DEBUGGER环境变量接入 packagerReact Native 官方文档支持自定义 JavaScript 调试器Custom JavaScript Debugger当你在应用中开启Debug JS Remotely时packager 会尝试启动REACT_DEBUGGER环境变量指定的命令。借助它可以在开启远程调试的一瞬间自动拉起 RNDebugger$ REACT_DEBUGGERunset ELECTRON_RUN_AS_NODE open -g rndebugger://set-debugger-loc?port19000 || npm start要点说明open -g表示后台打开、不抢占焦点||结尾保证命令链不会阻塞 packager 启动。这里的port19000是自定义值需与实际 packager 端口一致Expo 等工具默认使用19000标准 React Native 使用8081。unset ELECTRON_RUN_AS_NODE是必要的RNDebugger 基于 Electron而 packager 环境里可能残留ELECTRON_RUN_AS_NODE变量它会阻止 Electron 应用以正常 GUI 模式启动必须先清除。macOS 用openLinux 用xdg-openWindows 当前不支持此方案。2.3 使用react-native-debugger-open包推荐如果不想手动配置环境变量可以在项目中安装官方配套的 react-native-debugger-opennpm 包来自动化这一过程它的两个核心价值替换 packager 的默认行为把open debugger-ui with Chrome替换为open React Native Debugger从此开启远程调试时不会再自动弹出 Chrome 的 debugger-ui 页面省去每次手动关闭的麻烦。自动探测 packager 端口检测 react-native packager 的实际端口并传给应用当你用自定义--port启动 packager 或使用 Expo 时非常实用。安装与注入在 React Native 项目内执行$ npm i --save-dev react-native-debugger-open在package.json中加入scripts: { postinstall: rndebugger-open }之后每次npm install都会自动执行注入也可手动运行npm run postinstall立即生效。注入的本质是改写node_modules中 packager 的getDevToolsMiddleware.js/devToolsMiddleware.js源码 injectDevToolsMiddleware.js 按 React Native 版本0.50、0.53、0.59、0.62 及后续匹配不同的中间件实现用/* react-native-debugger-patch start */ ... end */标记包裹替换代码将launchChromeDevTools/launchDefaultDebugger等函数改为跳过 Chrome 并拼接rndebugger://set-debugger-loc?host...port...projectRoots...参数。也可以不使用 postinstall 注入直接通过REACT_DEBUGGER运行$ REACT_DEBUGGERrndebugger-open --open --port 8081 npm start # Windows $ set REACT_DEBUGGERrndebugger-open --open --port 8081 npm start如果使用 Expo≤ 48把端口换成19000。命令行选项来自 npm-package/README.md选项说明默认值macos使用react-native-macos模块名代替react-native针对 React Native for macOSfalserevert撤销已注入的补丁falseopen直接执行 open 而不是注入补丁falseport配合--open指定 packager 端口8081跨平台行为差异源码 open.jsmacOS优先执行open -g -a React Native Debugger rndebugger://set-debugger-loc?...依赖已注册的 URI scheme 自动拉起应用打开失败如未安装则回退到通过$HOME/.rndebugger_port端口文件连接本地 TCP 服务仅发送set-debugger-loc请求。Linux / Windows无法自动打开应用只能向本地 TCP 服务发送set-debugger-loc请求需先手动打开 RNDebuggerWindows 下同样通过%USERPROFILE%\.rndebugger_port找到监听端口。2.4 Windows 支持现状rndebugger:URI scheme 目前不支持 Windows。在 Windows 上react-native-debugger-open只能向已打开的 RNDebugger 发送 host / port 设置无法在应用未打开时自动启动它。若希望贡献该能力可阅读 contributing.md。三、Redux DevTools Extension APIRNDebugger 基于redux-devtools/app实现并提供了与 Redux DevTools Extension完全一致的 API。开启Debug JS Remotely后以下全局对象已就绪window.__REDUX_DEVTOOLS_EXTENSION__window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__window.__REDUX_DEVTOOLS_EXTENSION__.connect因此只需在 store 创建处做最小改动即可接入无需安装浏览器扩展const store createStore( reducer /* preloadedState, */, window.__REDUX_DEVTOOLS_EXTENSION__ window.__REDUX_DEVTOOLS_EXTENSION__(), )浏览器扩展文档中那些针对扩展的特殊说明可以忽略因为 RNDebugger 已内置完整实现。若项目已经使用redux-devtools-extensionnpm 包也可以直接沿用API 完全兼容。完整说明见 redux-devtools-integration.md。关于trace功能的注意点开启trace并访问Trace标签页时调试器会对每个选中的 action 加载并解析 source map可能导致应用变慢性能敏感场景下需谨慎开启。四、平台支持范围目标平台版本要求React Native 0.43React Native for macOS原 react-native-desktop 0.14.0React Native for Windows官方支持列表五、应用自动更新v0.5.0 起支持macOS支持后台自动更新。Linux / Windows检测到新版本时仅弹出下载提示对话框需要手动下载安装。也可以随时通过菜单栏React Native DebuggerLinux / Windows 为RND→Check for Updates...手动检查更新。六、关联文档导航以下文档与本文共同构成完整使用手册可在仓库docs/目录下继续阅读Debugger IntegrationReact DevTools IntegrationRedux DevTools IntegrationApollo Client DevTools IntegrationShortcut referencesNetwork inspect of Chrome Developer ToolsEnable open in editor in consoleConfig file in home directoryTroubleshootingContributing七、本文涉及的源码索引关注点位置rndebugger://URL 解析与处理handleURL.js端口文件$HOME/.rndebugger_port读写port.js应用主进程窗口创建、Linux 单实例、默认端口main.jsreact-native-debugger-open包入口与 open 逻辑main.js、open.jspackager 中间件补丁注入/回滚实现injectDevToolsMiddleware.js赞分享开发工具移动开发桌面应用【免费下载链接】react-native-debuggerThe standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools项目地址https://gitcode.com/gh_mirrors/re/react-native-debugger点击查看免费下载相关推荐全面战争MOD管理难题如何用开源工具实现一键配置与零冲突体验全面战争MOD管理难题如何用开源工具实现一键配置与零冲突体验 如果你是一位《全面战争》系列游戏的玩家是否曾经历过这样的困扰订阅了数十个MOD后游戏启动时桌面应用游戏开发5分钟快速上手React Native Debugger终极调试指南5分钟快速上手React Native Debugger终极调试指南 React Native Debugger是一款功能强大的独立调试工具为React N开发工具移动开发桌面应用免费数据恢复终极指南TestDisk与PhotoRec找回丢失文件的完整教程免费数据恢复终极指南TestDisk与PhotoRec找回丢失文件的完整教程 当您不小心删除了重要文件或者硬盘分区突然消失时那种焦急的心情我完全理解。幸运存储上一篇Remotion 视频标注实战3 个高频翻车场景逐个画出会动的高亮框和箭头下一篇超实用DeepSeek-V3推理性能调优指南batch_size如何影响P99延迟与吞吐量创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
