跳到主要内容

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 清除控制台视图。

源和断点​

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

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

使用断点暂停代码 | Chrome DevTools

提示

迷你指南​

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

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

实用技巧​

  • 当您的应用程序暂停时，将出现“Debugger 中已暂停”叠加层。点击它以恢复。
  • 在断点处，注意右侧面板，它允许您检查当前作用域和调用堆栈，并设置监视表达式。
  • 使用 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 Components 面板允许您检查和更新渲染的 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 分析器​

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”。