跳到主要内容

React Native DevTools

React Native DevTools 是我们为 React Native 打造的现代调试体验。它从零开始专门构建，旨在比以前的调试方法更加集成、准确和可靠。

React Native DevTools 打开到"欢迎"面板

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

核心功能​

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

Console​

React Native DevTools Sources 视图中的一系列日志，旁边是一台设备

Console 面板允许你查看和过滤消息、执行 JavaScript、检查对象属性等。

Console 功能参考 | Chrome DevTools

实用提示​

  • 如果你的应用有很多日志，请使用过滤框或更改显示的日志级别。
  • 使用 Live Expressions 实时观察值的变化。
  • 使用 Preserve Logs 在重新加载后保持消息。
  • 使用 Ctrl + L 清除控制台视图。

Sources 和断点​

React Native DevTools Sources 视图中暂停的断点，旁边是一台设备

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

使用断点暂停代码 | Chrome DevTools

tip

迷你指南​

断点是你调试工具箱中的基础工具！

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

实用提示​

  • 当应用暂停时，会出现"Paused in Debugger"覆盖层。点击它即可恢复。
  • 注意断点处的右侧面板，它允许你检查当前作用域和调用栈，并设置监视表达式。
  • 使用 debugger; 语句可以从文本编辑器快速设置断点。它会通过 Fast Refresh 立即到达设备。
  • 有多种断点类型！例如，条件断点和日志点。

Network
自 0.83 起
​

React Native DevTools Network 面板中的网络请求

Network 面板允许你查看和检查应用发出的网络请求。记录的请求提供详细的元数据，如时间信息和发送/接收的请求头，以及响应预览。

打开 DevTools 时网络请求会自动记录。我们支持 Chrome 的大部分功能，但有一些例外。详见下文。

💡 网络事件覆盖范围、Expo 支持

哪些网络事件会被捕获？

目前，我们记录所有通过 fetch()、XMLHttpRequest 和 <Image> 发起的网络调用——对自定义网络库（如 Expo Fetch）的支持将在后续添加。

Expo Network 差异

因此，使用 Expo 的应用将继续看到"Expo Network"面板——这是 Expo 框架的单独实现，它会记录这些额外的请求来源，但功能稍有减少。

  • 覆盖 Expo 特定的网络事件。
  • 不支持请求发起者信息。
  • 不集成 Performance 面板。

我们正在与 Expo 合作，计划在未来版本中将 Expo Fetch 和第三方网络库集成到我们新的 Network 检查管道中。

尚未实现的功能

在发布时，以下功能在 React Native 中尚不支持：

  • WebSocket 事件
  • 网络响应模拟
  • 模拟网络限速
💡 响应预览缓冲区大小

如果你正在检查大量响应数据，请注意响应预览缓存在设备上的缓冲区中，最大大小为 100MB。这意味着如果缓存变得过大，我们可能会清除响应预览（但不会清除元数据），最旧的请求最先被清除。

实用提示​

  • 使用 Initiator 标签页查看应用中网络请求发起的调用栈。
  • 网络事件也会显示在 Performance 面板的 Network 轨道中。

Performance
自 0.83 起
​

React Native DevTools Performance 面板中的性能追踪

性能追踪允许你在应用中录制性能会话，以了解 JavaScript 代码的运行情况以及哪些操作耗时最多。在 React Native 中，我们在单个性能时间线中展示 JavaScript 执行、React 性能轨道、网络事件和自定义 User Timings。

实用提示​

  • 使用注释（Shift+拖拽）来标记性能追踪——在下载和分享追踪记录给同事之前非常有用。注释还提供了一种快速估算时间跨度（以秒为单位）的方式。
  • 使用应用中的 PerformanceObserver API 在运行时观察性能事件——如果你想捕获性能遥测数据，这非常有用。

了解更多​

Memory​

在 Memory 面板中检查堆快照

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

录制堆快照 | Chrome DevTools

实用提示​

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

React DevTools 功能​

在集成的 Components 和 Profiler 面板中，你可以找到 React DevTools 浏览器扩展的所有功能。它们在 React Native DevTools 中可以无缝使用。

React Components​

使用 React Components 面板选择和定位元素

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

  • 在 DevTools 中悬停或选择元素，设备上的对应元素会被高亮显示。
  • 要在 DevTools 中定位元素，请点击左上角的"选择元素"按钮，然后点击应用中的任意元素。

实用提示​

  • 可以使用右侧面板在运行时查看和修改组件的 props 和 state。
  • 使用 React Compiler 优化的组件会标注"Memo ✨"徽章。
tip

进阶提示：高亮重新渲染​

重新渲染可能是 React 应用中性能问题的重要原因。DevTools 可以在组件重新渲染时实时高亮显示。

  • 要启用此功能，请点击 View Settings（⚙︎）图标，勾选"Highlight updates when components render"。

高亮重新渲染设置的位置，旁边是实时渲染覆盖层的录制

React Profiler​

以火焰图形式渲染的性能分析

React Profiler 面板允许你录制性能分析报告，以了解组件渲染和 React commit 的耗时情况。

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

重新连接 DevTools​

有时 DevTools 可能会与目标设备断开连接。这可能发生在以下情况下：

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

断开连接时，将显示一个消息为"Debugging connection was closed"的对话框。

设备断开连接时显示的重新连接对话框

从这里，你可以：

  • 关闭：选择关闭（×）图标或点击对话框外部，返回到断开连接前最后状态的 DevTools UI。
  • 重新连接：选择"Reconnect DevTools"，并解决断开连接的原因后重试。