React Native 调试工具

React Native DevTools 是我们全新的调试体验，它对我们的调试器栈进行了端到端的重写。它旨在比 React Native 中以前的调试方法更深入地集成并且更可靠。

React Native DevTools 旨在用于调试 React 应用问题，而不是取代原生工具。如果您想检查 React Native 的底层平台层（例如，在开发原生模块时），请使用 Android Studio 和 Xcode 中提供的调试工具（请参阅 调试原生代码）。

💡 兼容性 — 在 0.76 版本中发布

React Native DevTools 支持所有运行 Hermes 的 React Native 应用。它取代了之前的 Flipper、实验性调试器和 Hermes 调试器（Chrome）前端。

无法在任何旧版本的 React Native 中设置 React Native DevTools。

• Chrome 浏览器调试工具 — 不支持
  • 通过 chrome://inspect 连接到 React Native 现已不再支持。功能可能无法正常工作，因为最新版本的 Chrome DevTools（其构建旨在匹配最新的浏览器功能和 API）尚未经过测试，并且此前端缺少我们的自定义项。相反，我们随 React Native DevTools 提供了一个受支持的版本。
• Visual Studio Code — 不支持（预先存在）
  • 第三方扩展（如 Expo 工具 和 Radon IDE）可能改进了兼容性，但不受 React 团队的直接支持。

💡 反馈和常见问题

我们希望您用于跨所有平台调试 React 的工具能够可靠、熟悉、简单且具有一致性。此页面上描述的所有功能都是根据这些原则构建的，我们还希望在将来提供更多功能。

我们正在积极迭代 React Native DevTools 的未来，并创建了一个集中的 GitHub 讨论 以跟踪问题、常见问题和反馈。

核心功能

React Native DevTools 基于 Chrome DevTools 前端。如果您有 Web 开发背景，其功能应该很熟悉。作为起点，我们建议浏览 Chrome DevTools 文档，其中包含完整的指南以及视频资源。

控制台

控制台面板允许您查看和筛选消息、评估 JavaScript、检查对象属性等等。

控制台功能参考 | Chrome DevTools

实用技巧

• 如果您的应用有很多日志，请使用筛选框或更改显示的日志级别。
• 使用 实时表达式 监视随时间推移的值。
• 使用 保留日志 在重新加载之间持久化消息。
• 使用 Ctrl + L 清除控制台视图。

源代码和断点

源代码面板允许您查看应用中的源文件并注册断点。使用断点定义应用应暂停的代码行，从而允许您检查程序的实时状态并逐步遍历代码。

使用断点暂停代码 | Chrome DevTools

提示

迷你指南

断点是调试工具包中的基本工具！

1. 使用侧边栏或 Cmd ⌘+P / Ctrl+P 导航到源文件。
2. 单击代码行旁边的行号列以添加断点。
3. 使用右上角的导航控件在暂停时 逐步遍历代码。

实用技巧

• 当您的应用暂停时，将出现“在调试器中暂停”覆盖层。点击它以恢复。
• 在断点时注意右侧面板，这些面板允许您检查当前作用域和调用栈，并设置监视表达式。
• 使用 debugger; 语句从文本编辑器快速设置断点。这将通过快速刷新立即到达设备。
• 有几种类型的断点！例如，条件断点和日志点。

重新连接调试工具

有时，调试工具可能会断开与目标设备的连接。如果发生以下情况，可能会发生这种情况：

• 应用已关闭。
• 应用已重新构建（安装了新的原生构建）。
• 应用在原生端崩溃。
• 开发服务器（Metro）已退出。
• 物理设备已断开连接。

断开连接时，将显示一个带有“调试连接已关闭”消息的对话框。

在这里，您可以：

• 关闭：选择关闭 (×) 图标或单击对话框外部以返回到断开连接之前的最后一个状态的 DevTools UI。
• 重新连接：在解决断开连接的原因后，选择“重新连接调试工具”。