跳到主要内容

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、Experimental Debugger 和 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

实用技巧​

  • 如果您的应用有很多日志，请使用过滤器框或更改显示的日志级别。
  • 使用 Live Expressions 随时间观察值。
  • 使用 保留日志 在重新加载时保留消息。
  • 使用 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 和状态。
  • 使用 React Compiler 优化的组件将使用“Memo ✨”徽章进行注释。
提示

小贴士：高亮重渲染​

重渲染可能是导致 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”，解决断开连接的原因。