博客更新日志 GitHub 简中文档

调试运行时问题

编辑页面

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

无论你是在本地开发应用、向部分 Beta 测试人员分发应用，还是将应用正式发布到应用商店，你都会不断遇到需要调试的问题。通常可以将错误分为两类：

你在开发过程中遇到的错误
你（或你的用户）在生产环境中遇到的错误

下面我们来看看处理以上每种情况时的推荐做法。

如果你已经熟悉 React Native 调试，可以查看调试工具，了解诸如 React Native DevTools 和内置性能分析器等 Expo 专用工具。

开发错误

这些是在开发应用时遇到的常见错误。深入排查它们并不总是那么直接。通常，在使用 Expo CLI 运行应用时进行调试就足够了。

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

在 Google 和 Stack Overflow 上搜索错误信息，很可能你不是第一个遇到这个问题的人。
隔离抛出错误的代码。这一步对于修复隐晦的错误至关重要。可以这样做：
- 回退到一个可正常工作的代码版本，甚至可以是一个完全空白的 npx create-expo-app 项目。
- 将你最近的改动逐步应用，直到它出错为止。
- 如果你在每个“片段”中添加的代码都很复杂，你可能需要简化当前做的事情。例如，如果你使用了 Redux 之类的状态管理库，可以尝试完全把它从方程中移除，看看问题是否出在状态管理上（这在 React 应用中很常见）。
- 这样可以缩小错误的可能来源范围，并为你提供更多信息，以便在网上搜索遇到相同问题的其他人。
使用断点（或 console.log）检查并确保某段代码确实被执行了，或者某个变量具有特定值。使用 console.log 进行调试并不被视为最佳实践，不过它速度快、简单，而且往往能提供一些有启发性的信息。

尽可能简化代码来追踪错误来源，是调试应用的绝佳方式，而且会变得越来越容易。这也是为什么许多开源仓库在你提交 issue 时会要求提供一个最小可复现示例。这可以确保你已经隔离了问题，并准确找出问题发生的位置。如果你的应用过于庞大和复杂而无法做到这一点，可以尝试在一个空白的 npx create-expo-app 项目中提取你想要添加的功能，然后从那里继续。

原生调试

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

Android Studio

1

通过运行以下命令，为你的项目生成原生代码：

Terminal

- npx expo prebuild -p android

这会在项目根目录下添加一个 android 目录。

2

通过运行以下命令，在 Android Studio 中打开项目：

Terminal

- open -a "/Applications/Android Studio.app" ./android

3

从 Android Studio 构建应用并连接调试器。有关更多信息，请参见 Google 的文档。

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

Xcode

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

1

通过运行以下命令，为你的项目生成原生代码：

Terminal

- npx expo prebuild -p ios

这会在项目根目录下添加一个 ios 目录。

2

通过运行以下命令在 Xcode 中打开项目，该命令是一个快捷方式，用于从项目 ios 目录中打开 .xcworkspace 文件到 Xcode。

Terminal

- xed ios

3

使用 Cmd ⌘ + r 构建应用，或者点击 Xcode 左上角的播放按钮。

4

现在你可以使用低级调试器（LLDB）以及其他所有 Xcode 调试工具来检查原生运行时。

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

查看原生日志

当你的应用崩溃或出现异常行为时，JavaScript 错误输出并不总能说明全部情况。来自 Android 和 iOS 的原生日志可以揭示崩溃原因、原生模块错误以及系统级警告，而这些信息不会出现在 Metro 打包器或 React Native DevTools 中。

如何使用 ADB Logcat 和 macOS Console 进行调试

如何使用 ADB Logcat 和 macOS Console 进行调试

在本教程中，你将学习如何使用 ADB Logcat 和 macOS Console 等原生设备日志功能来查找代码中的 bug，并快速修复它们。

Android：adb logcat

连接你的 Android 设备（或使用模拟器），并运行以下命令：

Terminal

- adb logcat

Android Debug Bridge（adb）程序是 Android SDK 的一部分，允许你查看流式日志。另一种避免安装 Android SDK 的方法是在 Chrome 中使用 WebADB。

iOS：Console 应用

你可以通过将设备连接到 Mac（或在运行 iOS 模拟器时）在 Xcode 中使用 Console 应用。请按以下步骤访问 Console 应用：

1

打开 Xcode 应用，然后按 Shift + Cmd ⌘ + 2 打开 Devices and Simulators 窗口。

2

如果你连接了实体设备，请在 Devices 下选择它。否则，如果你正在使用模拟器，请在 Simulators 下选择它。

Xcode 中的 Devices and Simulators 窗口。

3

点击窗口中显示的 Open Console 按钮以打开 console 应用。

Xcode 中 Devices and Simulators 窗口里的 Open Console 按钮。

这将打开 console 应用，供你查看来自设备或模拟器的日志。

生产错误

生产环境应用中的错误或 bug 往往更难解决，主要是因为你对错误的上下文了解较少（也就是：错误在哪里、如何发生、为什么发生？）。

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

生产应用崩溃

当生产应用崩溃时，与开发阶段相比，可用信息非常少。首先尝试在本地复现崩溃，然后按以下步骤缩小原因范围：

检查平台特定的崩溃报告。
- 对于 Google Play Store 上的 Android 应用，请参考 Google Play Console 中的崩溃部分。
- 对于 TestFlight 或 App Store 上的 iOS 应用，请在 Xcode 中使用 Crashes Organizer。另请参阅 Apple 的 Diagnosing Issues Using Crash Reports and Device Logs 指南。
使用原生日志工具。连接一个可以复现崩溃的设备，并使用 adb logcat 或 Console 应用来捕获原生日志输出。当 JavaScript 错误边界未能捕获问题时，原生日志通常会揭示根本原因。
尝试在本地使用生产模式。在本地以 production mode 运行应用会显示通常不会抛出的错误。为此，你可以运行 npx expo start --no-dev --minify。--no-dev 标志告诉服务器以生产模式运行，而 --minify 用于像生产 JavaScript bundle 一样对代码进行压缩。
检查你的崩溃报告仪表盘。如果你使用 Sentry、BugSnag 或类似服务，请先在那里查看崩溃。这些服务会提供堆栈跟踪、设备信息以及复现上下文。

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

这可能表明存在性能问题。你可能需要通过性能分析器运行你的应用，以更好地了解哪些进程正在导致应用终止，React Native 为此提供了一些很棒的文档。我们也建议使用 React Native DevTools 以及内置的性能分析器，这样就能非常轻松地识别应用中的 JavaScript 性能瓶颈。

使用错误报告服务

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

针对生产部署提供实时洞察，并附带用于复现崩溃和 bug 的信息。
设置告警系统，以便在致命 JavaScript 错误或你配置的任何其他事件发生时收到通知。
使用网页仪表盘查看异常详情，例如堆栈跟踪、设备信息等。

使用 Expo 时，你可以集成像 Sentry 或 BugSnag 这样的报告服务，以便实时获得更多洞察。

卡住了？

Expo 社区以及 React 和 React Native 社区是你遇到问题时获取帮助的绝佳资源。很有可能其他人也遇到过和你一样的错误，所以请务必阅读文档，搜索论坛、GitHub issues 和 Stack Overflow。