中文网
🌐 Nodejs.cn
首页指南EAS参考教程

调试和分析工具

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

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

🌐 React Native consists of both JavaScript and native code. Making this distinction is very important when it comes to debugging. If an error is thrown from the JavaScript code, you might not find it using debugging tools for native code. This page lists a few tools to help you debug your Expo project.

开发者菜单

🌐 Developer menu

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

打开开发者菜单的替代选项
  • 安卓设备（无 USB）：垂直摇动设备。
  • Android 模拟器或设备（带 USB）：
    • 按 Cmd ⌘ + m 或 Ctrl + m。
    • 在终端中运行以下命令以模拟按下菜单按钮：
      Terminal
      - adb shell input keyevent 82
  • iOS 设备（无 USB）：
    • 摇动设备。
    • 用三根手指触摸屏幕。
  • iOS 模拟器或设备（通过 USB）:
    • 按 Ctrl + Cmd ⌘ + z 或 Cmd ⌘ + d

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

🌐 Once the Developer menu is open, it will appear as below:

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

🌐 The Developer menu provides the following options:

  • 复制链接：在开发客户端中复制开发服务器地址，或在你的应用的 Expo 中复制 exp:// 链接。
  • 重新加载：重新加载你的应用。通常不需要，因为默认启用了快速刷新。
  • 回到首页：离开你的应用并导航回开发客户端或 Expo Go 应用的首页屏幕。
  • 切换性能监控：查看有关你的应用的性能信息。
  • 切换元素检查器：启用或禁用元素检查器覆盖。
  • 打开开发者工具（以前称为 打开 JS 调试器）：用于打开 React Native 开发者工具，可访问应用使用 Hermes 时的控制台、资源、网络（仅限 Expo）、内存、组件和性能分析器标签。更多信息，请参阅使用 React Native 开发者工具进行调试部分。
  • 快速刷新：在使用文本编辑器修改项目中的文件时，切换 JS 包的自动刷新功能。

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

🌐 Now, let's explore some of these options in details.

切换性能监视器

🌐 Toggle performance monitor

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

🌐 Opens up a small overlay that provides the following performance information about your app:

  • 项目的内存使用情况。
  • JavaScript 堆（这是了解应用中是否存在内存泄漏的一种简单方法）。
  • 两个视图。上方显示屏幕的浏览次数，下方显示组件的浏览次数。
  • UI 和 JS 线程的每秒帧数。UI 线程用于原生 Android 或 iOS 的界面渲染。JS 线程是大多数逻辑运行的地方，包括 API 调用、触摸事件等。

切换元素检查器

🌐 Toggle element inspector

打开元素检查器覆盖层：

🌐 Opens up the element inspector overlay:

此覆盖层具有以下功能：

🌐 This overlay has capabilities to:

  • 检查：检查元素
  • 性能：显示性能覆盖
  • 网络：显示网络详情
  • 可触控元素：高亮可触控的元素

使用 React Native 开发者工具进行调试

🌐 Debugging with React Native DevTools

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

React Native 开发者工具 是一个用于 Expo 和 React Native 应用的现代调试工具。它允许你通过访问 控制台、源代码、网络（仅限 Expo）和 内存 标签页来深入了解应用的 JavaScript 代码。它还内置支持 React 开发者工具，例如 组件 和 性能分析 标签页。所有这些检查器都可以通过 开发客户端 或 Expo Go 访问。

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

在断点处暂停

🌐 Pausing on breakpoints

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

🌐 You can pause your app on specific parts of your code. To do this, set the breakpoint under the Sources tab by clicking the line number or add the debugger statement in your code.

一旦你的应用执行到设置了断点的代码，它将完全暂停应用。这使你可以检查该作用域中的所有变量和函数。你还可以在 控制台 标签中执行代码，作为应用的一部分。

🌐 Once your app is executing code that has a breakpoint, it will entirely pause your app. This allows you to inspect all variables and functions in that scope. You can also execute code in the Console tab as part of your app.

在异常处暂停

🌐 Pausing on exceptions

如果你的应用抛出意外错误，很难找到错误的来源。你可以使用 React Native 开发工具暂停应用，并在抛出错误的那一刻检查堆栈跟踪和变量。

🌐 If your app throws unexpected errors, it can be hard to find the source of the error. You can use React Native DevTools to pause your app and inspect the stack trace and variables the moment it throws an error.

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

与控制台互动

🌐 Interacting with the console

控制台 标签让你可以访问一个交互式终端，该终端直接连接到你的应用。你可以在这个终端中编写任何 JavaScript 代码来执行代码片段，就好像它是你应用的一部分一样。默认情况下，代码会在全局作用域中执行。但当使用 Sources 标签的断点时，代码会在达到的断点作用域中执行。这允许你在整个应用中调用方法和访问变量。

🌐 The Console tab gives you access to an interactive terminal, connected directly to your app. You can write any JavaScript inside this terminal to execute snippets of code as if it were part of your app. The code is executed in the global scope by default. But, when using breakpoints from the Sources tab, it executes in the scope of the reached breakpoint. This allows you to invoke methods and access variables throughout your app.

检查网络请求（仅限 Expo）

🌐 Inspecting network requests (Expo only)

信息 只有在你的项目中安装了 expo 时，React Native DevTools 的网络（Network）选项卡才可用。

网络 标签让你了解应用发出的网络请求。你可以点击每个请求和响应进行检查。这包括 fetch 请求、外部加载的媒体，以及在某些情况下，甚至由原生模块发出的请求。

🌐 The Network tab gives you insights into the network requests made by your app. You can inspect each request and response by clicking on them. This includes fetch requests, external loaded media, and in some cases, even requests made by native modules.

信息 请参阅 检查网络流量 了解检查网络请求的其他方法。

检查内存

🌐 Inspecting memory

内存 选项卡允许你检查内存使用情况并对应用的 JavaScript 代码进行堆快照。

🌐 The Memory tab allows you to inspect the memory usage and take a heap snapshot of your app's JavaScript code.

检查组件

🌐 Inspecting components

组件 标签允许你检查应用中的 React 组件。你可以在 React Native 开发工具中将鼠标悬停在组件上，以查看每个组件的 props 和样式。这是调试应用 UI 并了解组件结构的好方法。

🌐 The Components tab allows you to inspect the React components in your app. You can view the props, and styles of each component by hovering that component in React Native DevTools. This is a great way to debug your app's UI and understand how your components are structured.

JavaScript 性能分析

🌐 Profiling JavaScript performance

警告 配置文件尚未使用源映射进行符号化，只能在调试版本中使用。这些限制将在即将发布的版本中得到解决。

分析器 选项卡允许你记录并分析应用的 JavaScript 性能。你可以开始记录、与应用进行交互，然后停止记录以分析性能表现。

🌐 The Profiler tab allows you to record and analyze the performance of your app's JavaScript. You can start recording, interact with your app, and stop recording to analyze the profile.

信息 要分析本地运行时性能，请使用 Android Studio 或 Xcode 中包含的工具。

使用 VS Code 进行调试

🌐 Debugging with VS Code

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

VS Code 是一款流行的代码编辑器，内置了调试器。这个调试器使用了与 React Native 开发工具相同的系统——检查器协议。

🌐 VS Code is a popular code editor, which has a built-in debugger. This debugger uses the same system as the React Native DevTools — the inspector protocol.

你可以在 Expo 工具 VS Code 扩展中使用这个调试器。此调试器允许你设置断点、检查变量，并通过调试控制台执行代码。

🌐 You can use this debugger with the Expo Tools VS Code extension. This debugger allows you to set breakpoints, inspect variables, and execute code through the debug console.

开始调试：

🌐 To start debugging:

  • 连接你的应用
  • 打开 VS Code 命令面板（根据你的电脑，快捷键是 Ctrl+Shift+P 或 Cmd ⌘+Shift+P）
  • 运行 Expo: 调试 ... VS Code 命令。

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

🌐 This will attach VS Code to your running app.

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

🌐 Alternatively, if you want a fully-featured IDE setup in VS Code, you might want to check out the Radon IDE extension (paid with a 30-day free trial). It turns your editor into a powerful environment designed specifically for React Native and Expo projects, with advanced debugging, a network inspector, router integration, and other built-in tools.

React Native 调试器

🌐 React Native Debugger

警告 React Native 调试器需要远程 JS 调试，而自 React Native 0.73 起已被弃用。

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

🌐 The React Native Debugger is a standalone app that wraps the React DevTools, Redux DevTools, and React Native DevTools. Unfortunately, it requires the deprecated Remote JS debugging workflow and is incompatible with Hermes.

如果你使用的是 Expo SDK 50 或更高版本，你可以使用 Expo 开发工具插件 来实现 React Native 调试器的功能：

🌐 If you are using Expo SDK 50 or above, you can use the Expo dev tools plugins equivalents to the React Native Debugger:

如果你正在使用 Expo SDK 49 及更早版本，可以使用 React Native 调试器。本节提供快速入门指南。如需详细信息，请查看其文档。

🌐 If you are using Expo SDK 49 and earlier, you can use the React Native Debugger. This section provides quick get started instructions. For in-depth information, check its documentation.

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

🌐 You can install it via the release page, or if you're on macOS you can run:

Terminal
- brew install react-native-debugger

初创公司

🌐 Startup

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

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

🌐 In the debugger console, you can see the Element tree, as well as the props, state, and children of whatever element you select. You also have the Chrome console on the right, and if you type $r in the console, you will see the breakdown of your selected element.

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

🌐 If you right-click anywhere in the React Native Debugger, you'll get some handy shortcuts to reload your JS, enable/disable the element inspector, network inspector, and to log and clear your AsyncStorage content.

检查网络流量

🌐 Inspecting network traffic

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

🌐 It's easy to use the React Native Debugger to debug your network request: right-click anywhere in the React Native Debugger and select Enable Network Inspect. This will enable the Network tab and allow you to inspect requests of fetch and XMLHttpRequest.

然而，有一些限制，所以还有一些其他替代方案，所有这些都需要使用代理：

🌐 There are however some limitations, so there are a few other alternatives, all of which require using a proxy:

调试生产应用

🌐 Debugging production apps

实际上，应用经常会带有漏洞。实现崩溃和错误报告系统可以帮助你实时了解生产环境中的应用情况。详情请参见 使用错误报告服务。

🌐 In reality, apps often ship with bugs. Implementing a crash and bug reporting system can help you get real-time insights of your production apps. See Using error reporting services for more details.