跳到主要内容

React Native DevTools

React Native DevTools 是我们为 React Native 提供的现代调试体验。它从头开始构建，旨在从根本上比以前的调试方法更加集成、正确和可靠。

React Native DevTools opened to the "Welcome" pane

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 浏览器 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 文档，其中包含完整的指南以及视频资源。

控制台​

A series of logs React Native DevTools Sources view, alongside a device

“控制台”面板允许你查看和过滤消息、评估 JavaScript、检查对象属性等。

控制台功能参考 | Chrome DevTools

实用技巧​

  • 如果你的应用有很多日志，请使用过滤器框或更改显示的日志级别。
  • 使用实时表达式随时间监视值。
  • 使用保留日志在重新加载时保留消息。
  • 使用 Ctrl + L 清除控制台视图。

Sources & 断点​

A paused breakpoint in the React Native DevTools Sources view, alongside a device

“Sources”面板允许你查看应用中的源文件并注册断点。 使用断点定义应用应暂停的代码行 — 从而允许你检查程序的实时状态并逐步执行代码。

使用断点暂停代码 | Chrome DevTools

提示

迷你指南​

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

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

实用技巧​

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

内存​

Inspecting a heap snapshot in the Memory panel

“内存”面板允许你拍摄堆快照并查看 JavaScript 代码随时间的内存使用情况。

记录堆快照 | Chrome DevTools

实用技巧​

  • 使用 Cmd ⌘+F / Ctrl+F 过滤堆中特定对象。
  • 拍摄分配时间线报告对于以图形方式查看一段时间内的内存使用情况，以识别可能的内存泄漏非常有用。

React DevTools 功能​

在集成的“组件”和“Profiler”面板中，你将找到 React DevTools 浏览器扩展的所有功能。 这些在 React Native DevTools 中无缝工作。

React 组件​

Selecting and locating elements using the React Components panel

“React 组件”面板允许你检查和更新渲染的 React 组件树。

  • 在 DevTools 中悬停或选择元素以在设备上突出显示它。
  • 要在 DevTools 中定位元素，请单击左上角的“选择元素”按钮，然后点击应用中的任何元素。

实用技巧​

  • 可以使用右侧面板在运行时查看和修改组件上的 Props 和 State。
  • 使用 React Compiler 优化的组件将使用“Memo ✨”徽章进行注释。
提示

Protip: 突出显示重新渲染​

重新渲染可能是导致 React 应用性能问题的重大因素。 DevTools 可以在组件重新渲染时突出显示它们。

  • 要启用，请单击“查看设置” (⚙︎) 图标并选中“在组件渲染时突出显示更新”。

Location of the "highlight updates" setting, next to a recording of the live render overlay

React Profiler​

A profile rendered as a flame graph

“React Profiler”面板允许你记录性能配置文件，以了解组件渲染和 React 提交的时间。

有关更多信息，请参阅2018 年的原始指南（请注意，其中部分内容可能已过时）。

重新连接 DevTools​

有时，DevTools 可能会与目标设备断开连接。 如果发生以下情况，可能会发生这种情况

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

断开连接时，将显示一个对话框，其中包含消息“调试连接已关闭”。

A reconnect dialog shown when a device is disconnected

从这里，你可以

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