调试和分析工具
了解可用于在运行时检查你的 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
Developer 菜单提供对有用调试功能的访问。它内置于开发客户端和 Expo Go 中。如果你使用的是模拟器、模拟器或通过 USB 连接的设备，则可以在 Expo CLI 启动开发服务器的终端中按 m 打开此菜单。
¥The Developer menu provides access to useful debugging functions. It is built into dev clients and Expo Go. If you are using an emulator, simulator, or have a device connected via USB, you can open this menu by pressing m in the terminal where Expo CLI has started the development server.
打开开发者菜单后，它将显示如下：
¥Once the Developer menu is open, it will appear as below:
Developer 菜单提供以下选项：
¥The Developer menu provides the following options:
-
复制链接：要在开发客户端中复制开发服务器地址或应用 Expo 中的
exp://链接。¥Copy link: To copy the dev server address in dev client or
exp://link in Expo of your app. -
重新加载：重新加载你的应用。通常没有必要，因为默认情况下启用了快速刷新。
¥Reload: To reload you app. Usually, not necessary since Fast Refresh is enabled by default.
-
回家：要离开你的应用并导航回开发客户端或 Expo Go 应用的主屏幕。
¥Go Home: To leave your app and navigate back to the dev client's or Expo Go app's Home screen.
-
切换性能监视器：要查看有关你的应用的性能信息。
¥Toggle performance monitor: To view the performance information about your app.
-
切换元素检查器：要启用或禁用元素检查器覆盖。
¥Toggle element inspector: To enable or disable the element inspector overlay.
-
打开 JS 调试器：要打开 Chrome DevTools，它提供对使用 Hermes 的应用的控制台、源和网络选项卡的访问。有关更多信息，请参阅 使用 Chrome 开发者工具进行调试 部分。
¥Open JS debugger: To open Chrome DevTools which provides access to Console, Source, and Network tabs for apps using Hermes. For more information, see the Debugging with Chrome DevTools section.
-
快速刷新：要切换使用文本编辑器更改项目中的文件时自动刷新 JS 包的设置。
¥Fast Refresh: To toggle automatic refreshing of the JS bundle whenever you make changes to files in your project using a text editor.
现在，让我们详细探索其中一些选项。
¥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:
-
项目的 RAM 使用情况。
¥RAM usage of a project.
-
JavaScript 堆（这是了解应用中任何内存泄漏的简单方法）。
¥JavaScript heap (this is an easy way to know of any memory leaks in your application).
-
两个视图。顶部表示屏幕的视图数，底部表示组件中的视图数。
¥Two Views. The top indicates the number of views for the screen and the bottom indicates the number of views in the component.
-
UI 和 JS 线程的每秒帧数。UI 线程用于原生 Android 或 iOS UI 渲染。JS 线程是大部分逻辑运行的地方，包括 API 调用、触摸事件等。
¥Frames Per Second for the UI and JS threads. The UI thread is used for native Android or iOS UI rendering. The JS thread is where most of your logic runs, including API calls, touch events, and so on.
切换元素检查器
¥Toggle element inspector
打开元素检查器覆盖层：
¥Opens up the element inspector overlay:
该覆盖层具有以下功能：
¥This overlay has capabilities to:
-
检查：检查元素
¥Inspect: Inspect elements
-
性能：显示性能叠加
¥Perf: Show Performance overlay
-
网络：显示网络详细信息
¥Network: Show network details
-
可触摸：高亮可触摸元素
¥Touchables: Highlight touchable elements
使用 Chrome 开发者工具进行调试
¥Debugging with Chrome DevTools
与网站一样，你可以使用 Chrome DevTools 来深入了解应用的 JavaScript 代码。使用此工具，你可以在使用 开发客户 或 Expo Go 时访问 控制台、来源 和 网络 选项卡。
¥As with websites, you can use Chrome DevTools to gain insights into the JavaScript code of your app. With this tool, you can access the Console, Source, and Network tab when using dev clients or Expo Go.
你可以在任何使用 Hermes 的应用上使用 Chrome DevTools。要打开它，请启动你的应用并在启动 Expo 的终端中按 j。打开 Chrome DevTools 后，它将显示如下：
¥You can use the Chrome DevTools on any app using Hermes. To open it, start your app and press j in the terminal where Expo was started. Once you have opened the Chrome DevTools, it will appear as below:
在断点处暂停
¥Pausing on breakpoints
你可以在代码的特定部分暂停应用。为此，请通过单击行号在“源”选项卡下设置断点，或在代码中添加 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.
通过 Chrome DevTools 设置的断点在很大程度上取决于源映射。不幸的是，这些源地图并不总是 100% 准确。在某些情况下，你可能必须使用debugger语句而不是断点。
出现异常时暂停
¥Pausing on exceptions
如果你的应用引发意外错误，则可能很难找到错误源。你可以使用 Chrome DevTools 暂停你的应用，并在抛出错误时检查堆栈跟踪和变量。
¥If your app throws unexpected errors, it can be hard to find the source of the error. You can use Chrome 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 来执行代码片段，就像它是你应用的一部分一样。默认情况下，代码在全局范围内执行。但是，当使用 来源 选项卡中的断点时，它会在到达的断点范围内执行。这允许你在整个应用中调用方法并访问变量。
¥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 Source tab, it executes in the scope of the reached breakpoint. This allows you to invoke methods and access variables throughout your app.
检查网络请求
¥Inspecting network requests
“网络”选项卡可让你深入了解应用发出的网络请求。你可以通过单击每个请求和响应来检查它们。这包括 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.
请参阅 检查网络流量 了解检查网络请求的替代方法。
分析 JavaScript 性能
¥Profiling JavaScript performance
配置文件尚未用源映射和 只能在调试版本中使用 进行符号化。这些限制将在即将发布的版本中得到解决。
你可以启用 Chrome DevTools 中的 JavaScript Profiler 选项卡来记录和分析应用 JavaScript 的性能。当前不支持“性能”选项卡。要分析原生运行时，请使用 Android Studio 或 Xcode 中包含的工具。
¥You can enable the JavaScript Profiler tab within Chrome DevTools to record and analyze the performance of your app JavaScript. The Performance tab is not currently supported. To profile the native runtime, use the tools included in Android Studio or Xcode.
在 Chrome DevTools 中启用 JavaScript Profiler
¥Enable the JavaScript Profiler within Chrome DevTools
-
按 ⌘ cmd + shift + p (Mac) 或 ctrl + shift + p (Windows、Linux) 打开命令面板。
¥Press ⌘ cmd + shift + p (Mac) or ctrl + shift + p (Windows, Linux) to open the command palette.
-
键入 javascript 并选择显示 JavaScript 分析器。
¥Type javascript and select Show JavaScript Profiler.
从 JavaScript Profiler 选项卡记录和读取配置文件
¥Record and read profiles from the JavaScript Profiler tab
-
按开始。
¥Press Start.
-
与你的应用交互。
¥Interact with your app.
-
按停止即可完成录制。
¥Press Stop to finish recording.
-
分析个人资料。
¥Analyze the profile.
使用 VS Code 进行调试
¥Debugging with VS Code
VS Code 调试器集成是实验性的。为了获得最稳定的调试体验，请使用 使用框架构建 React Native 应用。
VS Code 是一种流行的代码编辑器，它具有内置的调试器。该调试器使用与 Chrome DevTools 相同的系统 - 检查器协议。
¥VS Code is a popular code editor, which has a built-in debugger. This debugger uses the same system as the Chrome 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:
-
连接你的应用
¥Connect your app
-
打开 VS Code 命令面板（根据你的计算机，它是 Ctrl + Shift + p 或 Cmd ⌘ + Shift + p）
¥Open VS Code command palette (based on your computer, it's either Ctrl + Shift + p or Cmd ⌘ + Shift + p)
-
运行 Expo：调试 ...VS Code 命令。
¥Run the Expo: Debug ... VS Code command.
这会将 VS Code 附加到你正在运行的应用。
¥This will attach VS Code to your running app.
使用 React DevTools 进行调试
¥Debugging with React DevTools
React DevTools 是查看组件的 props 和状态的好方法。你可以在启动 Expo 的终端中按 Shift + m 打开它。打开后，将显示如下：
¥React DevTools is a great way to look at your components' props and state. You can open it by pressing Shift + m in the terminal where Expo was started. Once it's open, it will appear as below:
React DevTools 还可以与 元素检查器 配对，允许你通过点击应用内的组件来检查 props、状态和实例属性。
¥React DevTools can also be paired with the element inspector, allowing you to inspect props, state, and instance properties by tapping components inside your app.
按 shift + m 快捷键还将显示已安装的 开发工具插件，以提供检查应用的其他方法。
¥Pressing the shift + m shortcut will also show installed dev tools plugins to provide additional ways to inspect your app.
React Native 调试器
¥React Native Debugger
React Native 调试器不支持使用 Hermes 的应用，请参阅 Chrome 开发工具 部分。
React Native 调试器包括本页后面列出的许多工具，全部打包在一起，包括 React 开发工具 和网络请求检查。因此，如果你使用本页中的一种工具，它可能应该是这个。
¥The React Native Debugger includes many tools listed later on this page, all bundled into one, including React DevTools and network request inspection. For this reason, if you use one tool from this page, it should probably be this one.
我们将在这里快速浏览一下，但请查看他们的 documentation 以进行更深入的了解。
¥We'll give a quick look at it here, but check out their documentation for a more in-depth look.
你可以通过 发布页面 安装它，或者如果你在 macOS 上，你可以运行：
¥You can install it via the release page, or if you're on macOS you can run:
- brew install react-native-debugger启动
¥Startup
启动 React Native Debugger 后，你需要指定端口（快捷方式：macOS 上的 Cmd ⌘ + t，Linux/Windows 上的 Ctrl + t）到 8081。之后，使用 npx expo start 运行你的项目，并从开发者菜单中选择 Debug remote JS。调试器应该自动连接。
¥After firing up React Native Debugger, you'll need to specify the port (shortcuts: Cmd ⌘ + t on macOS, Ctrl + t on Linux/Windows) to 8081. After that, run your project with npx expo start, and select Debug remote JS from the Developer Menu. The debugger should automatically connect.
在调试器控制台中，你可以看到元素树，以及你选择的任何元素的属性、状态和子元素。右侧还有 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:
-
Charles 代理（~50 美元，我们的首选工具）
¥Charles Proxy (~$50 USD, our preferred tool)
-
代理人（提供免费版本或 49 至 59 美元）
¥Proxyman (Free version available or $49 to $59 USD)
调试生产应用
¥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.