This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

调试运行时问题

编辑页面

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


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

  • 你在开发过程中遇到的错误
  • 你(或你的用户)在生产环境中遇到的错误

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

开发错误

这些是在开发应用时遇到的常见错误。深入排查它们并不总是那么直接。通常,在使用 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 的文档

Xcode

1

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

Terminal
npx expo prebuild -p ios

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

2

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

Terminal
xed ios

3

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

4

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

查看原生日志

当你的应用崩溃或出现异常行为时,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 打开 设备与模拟器 窗口。

2

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

3

点击窗口中显示的 打开控制台 按钮以打开 console 应用。

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

生产错误

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

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

生产应用崩溃

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

  • 检查平台特定的崩溃报告。
  • 使用原生日志工具。 连接一个可以复现崩溃的设备,并使用 adb logcat 或 Console 应用 来捕获原生日志输出。当 JavaScript 错误边界未能捕获问题时,原生日志通常会揭示根本原因。
  • 尝试在本地使用生产模式。 在本地以 生产模式 运行应用会显示通常不会抛出的错误。为此,你可以运行 npx expo start --no-dev --minify--no-dev 标志告诉服务器以生产模式运行,而 --minify 用于像生产 JavaScript bundle 一样对代码进行压缩。
  • 检查你的崩溃报告仪表盘。 如果你使用 SentryBugSnag 或类似服务,请先在那里查看崩溃。这些服务会提供堆栈跟踪、设备信息以及复现上下文。

某些(较旧)设备上应用崩溃

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

使用错误报告服务

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

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

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

卡住了?

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