调试运行时问题

了解可用于调试 Expo 项目的不同技术。

无论你是在本地开发应用、将其发送给选定的 Beta 测试人员，还是将应用实时发布到应用商店，你总会发现自己在调试问题。将错误分为两类很有用：

¥Whether you're developing your app locally, sending it out to select beta testers, or launching your app live to the app stores, you'll always find yourself debugging issues. It's useful to split errors into two categories:

• 开发中遇到的错误

  ¥Errors you encounter in the development

• 你（或你的用户）在生产中遇到的错误

  ¥Errors you (or your users) encounter in production

让我们来看看处理上述每种情况时的推荐做法。

¥Let's go through recommended practices when dealing with each of the above situations.

开发错误

¥Development errors

它们是你在开发应用时遇到的常见错误。深入研究它们并不总是那么简单。通常，在使用 Expo CLI 运行应用时进行调试就足够了。

¥They are common errors that you encounter while developing your app. Delving into them isn't always straightforward. Usually, debugging when running your app with Expo CLI is enough.

调试这些问题的一种方法是查看 堆栈跟踪。但是，在某些情况下，仅查看堆栈跟踪还不够，因为跟踪的错误消息可能更加神秘。对于此类错误，请按照以下步骤操作：

¥One way you can debug these issues is by looking at the stack trace. However, in some scenarios, looking at the stack trace isn't enough as the error message traced might be a little more cryptic. For such errors, follow the steps below:

• 在 Google 和 Stack Overflow 中搜索错误消息，你可能不是第一个遇到此问题的人。

  ¥Search for the error message in Google and Stack Overflow, it's likely you're not the first person to ever run into this.

• 隔离引发错误的代码。此步骤对于修复模糊错误至关重要。去做这个：

  ¥Isolate the code that's throwing the error. This step is vital in fixing obscure errors. To do this:

  • 恢复到代码的工作版本。这甚至可能是一个完全空白的 npx create-expo-app 项目。

    ¥Revert to a working version of your code. This may even be a completely blank npx create-expo-app project.

  • 一点一点地应用你最近的更改，直到它崩溃。

    ¥Apply your recent changes piece by piece, until it breaks.

  • 如果你在每个 "piece" 中添加的代码很复杂，你可能希望简化你正在做的事情。例如，如果你使用 Redux 等状态管理库，你可以尝试将其从等式中完全删除，以查看问题是否出在你的状态管理中（这在 React 应用中很常见）。

    ¥If the code you're adding in each "piece" is complex, you may want to simplify what you're doing. For example, if you use a state management library such as Redux, you can try removing that from the equation completely to see if the issue lies in your state management (which is common in React apps).

  • 这应该可以缩小错误的可能来源，并为你提供更多信息，以便你在互联网上搜索遇到相同问题的其他人。

    ¥This should narrow down the possible sources of the error, and provide you with more information to search the internet for others who have had the same problem.

• 使用断点（或 console.log）来检查并确保特定代码正在运行，或者变量具有特定值。使用 console.log 进行调试并不被认为是最佳实践，但是，它快速、简单，并且常常提供一些有启发性的信息。

  ¥Use breakpoints (or console.logs) to check and make sure a certain piece of code is being run, or that a variable has a certain value. Using console.log for debugging isn't considered the best practice, however, it's fast, easy, and oftentimes provides some illuminating information.

尽可能简化代码以追踪错误源是调试应用的好方法，并且它会变得更加容易。这就是为什么许多开源存储库在你提出问题时需要 最小可重复示例。它可确保你隔离问题并准确识别问题发生的位置。如果你的应用太大且太复杂，无法执行此操作，请尝试提取你要在空白 npx create-expo-app 项目中添加的功能，然后从那里开始。

¥Simplifying code as much as possible to track down the source of error is a great way to debug your app and it gets exponentially easier. That's why many open-source repositories require a minimal reproducible example when you open an issue. It ensures you have isolated the issue and identified exactly where the problem occurs. If your app is too large and complex to do that, try and extract the functionality you're trying to add in a blank npx create-expo-app project, and go from there.

原生调试

¥Native debugging

你可以通过在本地生成源代码并从该源构建来使用 Android Studio 和 Xcode 执行完整的原生调试。

¥You can perform full native debugging with Android Studio and Xcode by generating source code locally and building from that source.

安卓工作室

¥Android Studio

完成此过程后，你可以删除 android 目录。这可确保你的项目仍由 Expo CLI 管理。保留目录并在 npx expo prebuild 之外手动修改它意味着你需要自己手动升级和配置原生库。

¥You can delete the android directory when you are done with this process. This ensures that your project remains managed by Expo CLI. Keeping the directory around and manually modifying it outside of npx expo prebuild means you'll need to manually upgrade and configure native libraries yourself.

Xcode

这仅适用于 macOS 用户，并且需要安装 Xcode。

¥This is only available for macOS users and requires Xcode to be installed.

完成此过程后，你可以删除 ios 目录。这可确保你的项目仍由 Expo CLI 管理。保留目录并在 npx expo prebuild 之外手动修改它意味着你需要自己手动升级和配置原生库。

¥You can delete the ios directory when you are done with this process. This ensures that your project remains managed by Expo CLI. Keeping the directory around and manually modifying it outside of npx expo prebuild means you'll need to manually upgrade and configure native libraries yourself.

生产错误

¥Production errors

生产应用中的错误或错误可能更难解决，主要是因为你对错误的上下文了解较少（即错误发生的地点、方式和原因？）。

¥Errors or bugs in your production app can be much harder to solve, mainly because you have less context around the error (that is, where, how, and why did the error occur?).

解决生产错误的最佳第一步是在本地重现它。一旦在本地重现错误，你可以按照 开发调试流程 来隔离并解决根本原因。

¥The best first step in addressing a production error is to reproduce it locally. Once you reproduce an error locally, you can follow the development debugging process to isolate and address the root cause.

提示：有时，在本地以生产模式运行应用会显示通常不会抛出的错误。你可以通过运行 npx expo start --no-dev --minify 在生产环境中本地运行该应用。--no-dev 告诉服务器不要在开发模式下运行，--minify 用于缩小代码，就像生产 JavaScript 包一样。

生产应用崩溃

¥Production app is crashing

当生产应用崩溃时，这可能是一个令人沮丧的场景。当它发生时，几乎没有什么信息可供调查。重现问题非常重要，即使你无法做到这一点，也要找到任何相关的崩溃报告。

¥It can be a frustrating scenario when a production app crashes. There is very little information to look into when it happens. It's important to reproduce the issue, and even if you can't do that, to find any related crash reports.

首先使用生产应用重现崩溃，然后找到关联的崩溃报告。对于 Android，你可以使用 adb logcat，对于 iOS，你可以使用 Xcode 中的控制台应用。

¥Start by reproducing the crash using your production app and then find an associated crash report. For Android, you can use adb logcat and for iOS you can use the Console app in Xcode.

使用 adb logcat 的崩溃报告

¥Crash reports using adb logcat

如果你的 Android 应用在 Google Play 上，请参阅 谷歌游戏控制台 的崩溃部分，或者将你的 Android 设备连接到计算机并运行以下命令：

¥If your Android app is on Google Play, refer to the crashes section of the Google Play Console, or connect your Android device to your computer and run the following command:

Android 调试桥 (adb) 程序是 Android SDK 的一部分，允许你查看流日志。避免安装 Android SDK 的另一种方法是在 Chrome 中使用 WebADB。

¥The Android Debug Bridge (adb) program is part of the Android SDK and allows you to view streaming logs. An alternative to avoid installing Android SDK is to use WebADB in Chrome.

使用控制台应用的崩溃报告

¥Crash reports using Console app

如果你的 iOS 应用位于 TestFlight 或 App Store 上，则可以在 Xcode 中使用 崩溃组织者。

¥If your iOS app is on TestFlight or the App Store, you can use the Crashes Organizer in Xcode.

如果没有，你可以通过将设备连接到 Mac 来使用 Xcode 中的控制台应用。请按照以下步骤了解如何访问控制台应用：

¥If not, you can use the Console app in Xcode by connecting your device to your Mac. Follow the steps below on how to access the Console app:

2

如果你已连接物理设备，请在“设备”下选择它。否则，如果你使用模拟器，请在模拟器下选择它。

¥If you have connected a physical device, select it under Devices. Otherwise, if you are using a simulator, select it under Simulators.

3

单击窗口中显示的“打开控制台”按钮以打开控制台应用。

¥Click on Open Console button shown in the window to open the console app.

这将打开控制台应用，供你查看设备或模拟器中的日志。

¥This will open the console app for you to view logs from your device or simulator.

有关更多信息，请参阅 Apple 的 使用崩溃报告和设备日志诊断问题 指南。

¥For more information, see Apple's Diagnosing Issues Using Crash Reports and Device Logs guide.

应用在某些（较旧）设备上崩溃

¥App crashes on certain (older) devices

这可能表明存在性能问题。你可能需要通过分析器运行你的应用，以更好地了解哪些进程正在终止应用，以及 React Native 为此提供了一些很棒的文档。我们还建议使用 React 开发工具 和附带的分析器，这使得识别应用中的性能下降变得非常容易。

¥This might indicate that there is a performance issue. You likely need to run your app through a profiler to get a better idea of what processes are killing the app, and React Native provides some great documentation for this. We also recommend using React DevTools and the included profiler, which makes it super easy to identify performance sinks in your app.

使用错误报告服务

¥Using error reporting services

在生产应用中实现崩溃和错误报告服务有几个好处，例如：

¥Implementing a crash and bug reporting service in your production app offers several benefits, such as:

• 实时洞察生产部署，并提供重现崩溃和错误的信息。

  ¥Real-time insights on production deployments with information to reproduce crashes and bugs.

• 设置警报系统以获取有关致命 JavaScript 错误或你配置的任何其他事件的通知。

  ¥Setting up an alert system to get notified about fatal JavaScript errors or any other event you configure.

• 使用 Web 仪表板查看异常的详细信息，例如堆栈跟踪、设备信息等。

  ¥Using a web dashboard to see details on exceptions such as stack traces, device information, and so on.

使用 Expo，你可以集成 Sentry 或 BugSnag 等报告服务，以实时获得更多见解。

¥With Expo, you can integrate a reporting service like Sentry or BugSnag to get more insights in real-time.

卡住？

¥Stuck?

Expo 社区以及 React 和 React Native 社区是你遇到困难时提供帮助的重要资源。其他人很可能遇到了与你相同的错误，因此请务必阅读文档，搜索 forums、GitHub 问题 和 Stack Overflow。

¥The Expo community and the React and React Native communities are great resources for help when you get stuck. There's a good chance someone else has run into the same error as you, so make sure to read the documentation, search the forums, GitHub issues, and Stack Overflow.