Docs
博客更新日志GitHub简中文档
首页指南EAS参考学习
存档Expo SnackDiscord 和论坛新闻邮件

调试与性能分析工具

编辑页面

了解可用于在运行时检查你的 Expo 项目的不同工具。

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

React Native 由 JavaScript 代码和原生代码两部分组成。在调试时，这一区分非常重要。如果错误是由 JavaScript 代码抛出的，你可能无法使用原生代码的调试工具找到它。本页列出了一些可帮助你调试 Expo 项目的工具。

开发者菜单

开发者菜单 提供了访问实用调试功能的入口。它内置于开发客户端和 Expo Go 中。如果你正在使用模拟器、仿真器，或者设备已通过 USB 连接，你可以在 Expo CLI 启动开发服务器的终端中按 m 打开此菜单。

打开开发者菜单的其他选项

  • Android 设备（未连接 USB）：

    • 垂直摇晃设备。

  • Android 模拟器或设备（已连接 USB）：

    • 按 Cmd ⌘ + m 或 Ctrl + m。
    • 在终端中运行以下命令，以模拟按下菜单按钮：
      Terminal
      - adb shell input keyevent 82

  • iOS 设备（未连接 USB）：

    • 摇晃设备。
    • 用三根手指触摸屏幕。

  • iOS 模拟器或设备（已连接 USB）：

    • 按 Ctrl + Cmd ⌘ + z 或 Cmd ⌘ + d

打开开发者菜单后，会如下所示：

开发者菜单提供以下选项：

  • Copy link：用于复制 dev client 中的开发服务器地址，或你应用在 Expo 中的 exp:// 链接。
  • Reload：重新加载你的应用。通常不需要，因为默认已启用 Fast Refresh。
  • Go Home：离开你的应用并返回 dev client 或 Expo Go 应用的主页。
  • Toggle performance monitor：查看有关你应用的性能信息。
  • Toggle element inspector：启用或禁用元素检查器覆盖层。
  • Open DevTools（原名 Open JS debugger）：打开 React Native DevTools，它为使用 Hermes 的应用提供 Console、Sources、Network（仅限 Expo）、Memory、Components 和 Profiler 选项卡。更多信息请参见 使用 React Native DevTools 调试 部分。
  • Fast Refresh：切换在你使用文本编辑器修改项目文件时是否自动刷新 JS bundle。

现在，让我们更详细地了解其中一些选项。

切换性能监视器

会打开一个小型覆盖层，提供以下有关你应用的性能信息：

  • 项目的 RAM 使用量。
  • JavaScript 堆（这是了解应用中是否存在内存泄漏的一种简便方式）。
  • 两个视图。顶部表示屏幕的视图数量，底部表示组件中的视图数量。
  • UI 线程和 JS 线程的每秒帧数。UI 线程用于原生 Android 或 iOS UI 渲染。JS 线程是大多数逻辑运行的地方，包括 API 调用、触摸事件等。

切换元素检查器

会打开元素检查器覆盖层：

此覆盖层具备以下功能：

  • Inspect：检查元素
  • Perf：显示性能覆盖层
  • Network：显示网络详情
  • Touchables：高亮可触摸元素

使用 React Native DevTools 调试

从 React Native 0.76 开始，React Native DevTools 已取代 Chrome DevTools。

React Native DevTools 是适用于 Expo 和 React Native 应用的现代调试工具。它允许你通过访问 Console、Sources、Network（仅限 Expo）和 Memory 选项卡，深入了解应用的 JavaScript 代码。它还内置支持 React DevTools，例如 Components 和 Profiler 选项卡。所有这些检查器都可通过 dev clients 或 Expo Go 访问。

你可以在任何使用 Hermes 的应用上使用 React Native DevTools。要打开它，请启动你的应用，然后在 Expo 启动所在的终端中按 j。打开 React Native DevTools 后，会如下所示：

在断点处暂停

你可以让应用在代码的特定位置暂停。为此，请在 Sources 选项卡中通过单击行号设置断点，或者在代码中添加 debugger 语句。

一旦应用执行到带有断点的代码，它就会完全暂停。这使你能够检查该作用域中的所有变量和函数。你也可以在 Console 选项卡中执行代码，作为应用的一部分。

在异常处暂停

如果你的应用抛出意外错误，可能很难找到错误来源。你可以使用 React Native DevTools 在应用抛出错误的瞬间暂停并检查调用栈和变量。

某些错误可能会被应用中的其他组件捕获，例如 Expo Router。在这些情况下，你可以开启 Pause on caught exceptions。这样即使错误已被妥善处理，你也能检查任何被抛出的错误。

与控制台交互

Console 选项卡为你提供一个交互式终端，可直接连接到你的应用。你可以在该终端中编写任意 JavaScript，将其作为应用的一部分执行代码片段。默认情况下，代码会在全局作用域中执行。但当使用 Sources 选项卡中的断点时，它会在到达的断点作用域中执行。这使你能够调用方法并访问整个应用中的变量。

检查网络请求（仅限 Expo）

React Native DevTools 中的 Network 选项卡仅在你的项目安装了 expo 时可用。

Network 选项卡可帮助你了解应用发出的网络请求。你可以通过单击每个请求和响应来检查它们。这包括 fetch 请求、外部加载的媒体，以及在某些情况下，甚至包括由原生模块发出的请求。

有关检查网络请求的其他方式，请参见 检查网络流量。

检查内存

Memory 选项卡允许你检查内存使用情况，并为应用的 JavaScript 代码拍摄堆快照。

检查组件

Components 选项卡允许你检查应用中的 React 组件。你可以通过在 React Native DevTools 中悬停在某个组件上，查看该组件的 props 和样式。这是调试应用 UI 以及理解组件结构的绝佳方式。

分析 JavaScript 性能

性能分析结果尚未使用 sourcemaps 进行符号化，而且只能在调试构建中使用。这些限制将在后续版本中得到解决。

Profiler 选项卡允许你记录并分析应用 JavaScript 的性能。你可以开始录制、与应用交互，然后停止录制以分析配置文件。

如需分析原生运行时，请使用 Android Studio 或 Xcode 中包含的工具。

使用 VS Code 调试

VS Code 调试器集成处于 alpha 阶段。若想获得最稳定的调试体验，请使用 React Native DevTools。

VS Code 是一款很受欢迎的代码编辑器，内置调试器。这个调试器使用与 React Native DevTools 相同的系统——检查器协议。

你可以通过 Expo Tools VS Code 扩展来使用此调试器。该调试器允许你设置断点、检查变量，以及通过调试控制台执行代码。

开始调试：

  • 连接你的应用
  • 打开 VS Code 命令面板（根据你的电脑，可能是 Ctrl + Shift + p 或 Cmd ⌘ + Shift + p）
  • 运行 Expo: Debug ... VS Code 命令。

这将把 VS Code 附加到你正在运行的应用上。

另外，如果你想在 VS Code 中获得功能齐全的 IDE 体验，可以看看 Radon IDE 扩展（付费，提供 30 天免费试用）。它会将你的编辑器变成一个专为 React Native 和 Expo 项目设计的强大环境，内置高级调试、网络检查器、路由器集成以及其他工具。

React Native 调试器

React Native 调试器需要远程 JS 调试，而这项功能自 React Native 0.73 起已被弃用。

React Native 调试器是一个独立应用，封装了 React DevTools、Redux DevTools 和 React Native DevTools。不幸的是，它需要使用已弃用的远程 JS 调试工作流，并且与 Hermes 不兼容。

如果你使用的是 Expo SDK 50 或更高版本，你可以使用与 React Native 调试器等效的 Expo 开发工具插件：

如果你使用的是 Expo SDK 49 及更早版本，你可以使用 React Native 调试器。本节提供快速入门说明。有关更深入的信息，请查看其文档。

你可以通过发布页安装它，或者如果你使用的是 macOS，可以运行：

Terminal
- brew install react-native-debugger

启动

启动 React Native 调试器后，你需要将端口（快捷键：macOS 上为 Cmd ⌘ + t，Linux/Windows 上为 Ctrl + t）指定为 8081。之后，使用 npx expo start 运行你的项目，并在开发者菜单中选择 Debug remote JS。调试器应该会自动连接。

在调试器控制台中，你可以查看元素树，以及你所选元素的 props、state 和 children。右侧还有 Chrome 控制台，如果你在控制台中输入 $r，你会看到所选元素的详细信息。

如果你在 React Native 调试器中的任何位置右键单击，你将获得一些便捷的快捷方式，用于重新加载你的 JS、启用/禁用元素检查器、网络检查器，以及记录和清除你的 AsyncStorage 内容。

检查网络流量

使用 React Native 调试器调试网络请求非常容易：在 React Native 调试器中的任意位置右键单击并选择 Enable Network Inspect。这将启用 Network 选项卡，并允许你检查 fetch 和 XMLHttpRequest 的请求。

不过，这里存在一些限制，因此还有一些其他替代方案，但它们都需要使用代理：

调试生产应用

实际上，应用经常会带着 bug 发布。实现崩溃和 bug 报告系统可以帮助你实时了解生产应用的情况。有关更多详情，请参阅使用错误报告服务。