React Native 开发者工具
React Native 开发者工具是我们为 React Native 提供的现代化调试体验。它从头开始专门构建，旨在比以前的调试方法从根本上更加集成、正确和可靠。
React Native 开发者工具旨在调试 React 应用相关问题，而非取代原生工具。如果您想检查 React Native 的底层平台层（例如，在开发原生模块时），请使用 Android Studio 和 Xcode 中可用的调试工具（参见 调试原生代码）。
💡 兼容性 — 于 0.76 版本发布
React Native 开发者工具支持所有运行 Hermes 的 React Native 应用。它取代了之前的 Flipper、Experimental Debugger 和 Hermes debugger (Chrome) 前端。
无法在任何旧版本的 React Native 上设置 React Native 开发者工具。
- Chrome 浏览器 DevTools — 不支持
- 通过
chrome://inspect连接 React Native 不再受支持。功能可能无法正常工作，因为最新版本的 Chrome DevTools（旨在匹配最新的浏览器功能和 API）尚未经过测试，并且此前端缺乏我们的自定义功能。相反，我们随 React Native 开发者工具提供了一个受支持的版本。
- 通过
- Visual Studio Code — 不支持 (先前存在)
- 第三方扩展如 Expo Tools 和 Radon IDE 可能具有改进的兼容性，但不受 React 团队直接支持。
💡 反馈与常见问题
我们希望您用于跨平台调试 React 的工具可靠、熟悉、简单且连贯。本页面上描述的所有功能都是本着这些原则构建的，我们也希望在未来提供更多的功能。
我们正在积极迭代 React Native 开发者工具的未来，并创建了一个集中的 GitHub 讨论区 来跟踪问题、常见问题和反馈。
核心功能
React Native 开发者工具基于 Chrome DevTools 前端。如果您有 Web 开发背景，其功能应该会很熟悉。作为起点，我们建议浏览 Chrome DevTools 文档，其中包含完整的指南以及视频资源。
控制台
控制台面板允许您查看和过滤消息、评估 JavaScript、检查对象属性等。
实用技巧
源代码与断点
源代码面板允许您查看应用中的源文件并注册断点。使用断点定义应用应暂停的代码行——允许您检查程序的实时状态并逐步单步执行代码。
实用技巧
- 当应用暂停时，会出现“在调试器中暂停”覆盖层。点击它以恢复。
- 注意断点时的右侧面板，它允许您检查当前作用域和调用栈，并设置监视表达式。
- 使用
debugger;语句从文本编辑器快速设置断点。这将通过 Fast Refresh 立即到达设备。 - 有多种断点！例如，条件断点和日志点。
内存
内存面板允许您获取堆快照并查看 JavaScript 代码随时间的内存使用情况。
实用技巧
- 使用 Cmd ⌘+F / Ctrl+F 过滤堆中的特定对象。
- 获取 分配时间线报告 对于以图形方式查看随时间的内存使用情况以识别可能的内存泄漏很有用。
React 开发者工具功能
在集成的组件和分析器面板中，您将找到 React 开发者工具 浏览器扩展的所有功能。这些功能在 React Native 开发者工具中无缝工作。
React 组件
React 组件面板允许您检查和更新渲染的 React 组件树。
- 在开发者工具中悬停或选择元素以在设备上突出显示它。
- 要在开发者工具中定位元素，点击左上角的“选择元素”按钮，然后点击应用中的任何元素。
实用技巧
- 可以使用右侧面板查看和修改组件的 props 和 state。
- 使用 React Compiler 优化的组件将标注有"Memo ✨"徽章。
React 性能分析器
React 性能分析器面板允许您记录性能配置文件以了解组件渲染和 React 提交的时间。
更多信息，请参阅 原始 2018 指南 (注意其中部分内容可能已过时)。
重新连接开发者工具
偶尔，开发者工具可能会与目标设备断开连接。如果发生以下情况，可能会出现这种情况：
- 应用已关闭。
- 应用已重建（安装了新的原生构建）。
- 应用在原生侧崩溃。
- 开发服务器 (Metro) 已退出。
- 物理设备已断开连接。
断开连接时，将显示一条消息为“调试连接已关闭”的对话框。
从这里，您可以：
- 关闭: 选择关闭 (
×) 图标或点击对话框外部以返回到断开连接前最后状态的开发者工具界面。 - 重新连接: 选择“重新连接开发者工具”，已解决断开连接的原因。