调试和分析工具

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

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

开发者菜单

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

一旦开发者菜单打开，菜单将如下所示：

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

• Copy link：复制开发客户端中的开发服务器地址或您应用中的 exp:// 链接。
• Reload：重新加载您的应用。通常不需要，因为默认启用了快速刷新。
• Go Home：离开您的应用并导航回开发客户端或 Expo Go 应用的主页。
• Toggle performance monitor：查看有关您的应用的性能信息。
• Toggle element inspector：启用或禁用元素检查器叠加层。
• Open JS debugger：打开 React Native DevTools，可访问控制台、源、网络（仅限 Expo）、内存、组件和 Profiler 选项卡，适用于使用 Hermes 的应用。有关更多信息，请参见 使用 React Native DevTools 调试 部分。
• Fast Refresh：在您使用文本编辑器更改项目中的文件时切换自动刷新 JS 包。

现在，让我们详细探讨这些选项中的一些。

切换性能监视器

打开一个小叠加层，提供有关您的应用的以下性能信息：

• 项目的 RAM 使用情况。
• JavaScript 堆（这是查看应用内存泄漏的简单方法）。
• 两个视图。顶部指示屏幕的视图数，底部指示组件的视图数。
• UI 和 JS 线程的每秒帧数。UI 线程用于原生 Android 或 iOS UI 渲染。JS 线程是大多数逻辑运行的地方，包括 API 调用、触摸事件等。

切换元素检查器

打开元素检查器叠加层：

此叠加层具有以下功能：

• 检查：检查元素
• 性能：显示性能叠加层
• 网络：显示网络详细信息
• 可触控元素：高亮显示可触控元素

使用 React Native DevTools 调试

从 React Native 0.76 开始，React Native DevTools 替代了 Chrome DevTools。

React Native DevTools 是用于 Expo 和 React Native 应用的现代调试工具。它使您能够通过访问 控制台、源、网络（仅限 Expo）和 内存 选项卡来深入了解您应用的 JavaScript 代码。它还内置支持 React DevTools，如 组件 和 Profiler 选项卡。所有这些检查器均可通过 开发客户端 或 Expo Go 访问。

您可以在任何使用 Hermes 的应用上使用 React Native DevTools。要打开它，请启动您的应用并在启动 Expo 的终端中按 j。一旦您打开了 React Native DevTools，它将如下所示：

在断点处暂停

您可以在代码的特定部分暂停应用。要做到这一点，请在源选项卡下通过单击行号设置断点或在代码中添加 debugger 语句。

一旦您的应用正在执行具有断点的代码，它将完全暂停您的应用。这使您能够检查该范围内的所有变量和函数。您还可以在您的应用的一部分 控制台 选项卡中执行代码。

在异常处暂停

如果应用抛出意外错误，找到错误来源可能很难。您可以使用 React Native DevTools 在应用暂停时检查堆栈跟踪和变量，错误抛出的那一刻。

某些错误可能会被您应用中的其他组件捕获，例如 Expo Router。在这些情况下，您可以开启 在捕获异常时暂停。这样可以使您能够检查任何抛出的错误，即使这些错误已经被正确处理。

与控制台交互

Console 选项卡使您能够访问一个交互式终端，直接连接到您的应用。您可以在此终端内写入任何 JavaScript，以执行代码片段，就像它是您应用的一部分一样。默认情况下，代码在全局范围内执行。但是，当使用来自 源 选项卡的断点时，它将在达到的断点范围内执行。这样可以让您在整个应用中调用方法并访问变量。

检查网络请求（仅限 Expo）

React Native DevTools 中的网络选项卡仅在您的项目中安装了 expo 时可用。

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

请参阅 检查网络流量 以获得检查网络请求的替代方法。

检查内存

Memory 选项卡可让您检查内存使用情况并获取应用 JavaScript 代码的堆快照。

检查组件

Components 选项卡允许您检查应用中的 React 组件。您可以在 React Native DevTools 中悬停组件，查看每个组件的属性和样式。这是调试应用 UI 和理解组件结构的好方法。

分析 JavaScript 性能

分析的配置尚未符号化为源映射，并且 只能在调试构建中使用。这些限制将在即将发布的版本中解决。

Profiler 选项卡允许您记录并分析应用 JavaScript 的性能。您可以开始记录，与应用交互，然后停止记录以分析性能。

要分析本机运行时，请使用 Android Studio 或 Xcode 中包含的工具。

使用 VS Code 调试

VS Code 调试器集成是实验性的。为了获得最稳定的调试体验，使用 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 或 更高版本，您可以使用 Expo 开发工具插件 来替代 React Native 调试器：

• React Native DevTools
• Redux DevTools

如果您使用的是 Expo SDK 49 或更早版本，则可以使用 React Native 调试器。本部分提供快速入门说明。有关详细信息，请查看其 文档。

您可以通过 发布页面 安装它，或者如果您在 macOS 上，可以运行：

启动

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

在调试控制台中，您可以看到元素树，以及所选元素的属性、状态和子元素。右侧还有 Chrome 控制台，如果您在控制台中输入 $r，您将看到所选元素的详细信息。

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

检查网络流量

在 React Native 调试器中调试网络请求非常简单：在 React Native 调试器的任何位置右键单击并选择 启用网络检查。这将启用网络选项卡，并允许您检查 fetch 和 XMLHttpRequest 的请求。

不过，也存在 一些限制，因此有一些其他替代方法，所有这些都需要使用代理：

• Charles Proxy (~$50 美元，我们推荐的工具)
• Proxyman（提供免费版本，或 $49 到 $59 美元）
• mitmproxy
• Fiddler

调试生产应用

实际上，应用通常会带着错误发布。实施崩溃和错误报告系统可以帮助您获得生产应用的实时洞察。有关更多详细信息，请参阅 使用错误报告服务。