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