跳至主要内容

调试基础

打开开发者菜单​

React Native 提供了一个应用内开发者菜单，其中包含多种调试选项。您可以通过摇晃设备或使用键盘快捷键访问开发者菜单。

  • iOS 模拟器：Cmd ⌘ + D（或设备 > 摇晃）
  • Android 模拟器：Cmd ⌘ + M（macOS）或 Ctrl + M（Windows 和 Linux）

或者，对于 Android 设备和模拟器，您可以在终端中运行 adb shell input keyevent 82。

The React Native Dev Menu

注意

开发者菜单在发布（生产）版本中被禁用。

打开 DevTools​

React Native DevTools 是我们为 React Native 内置的调试器。它允许您检查和理解 JavaScript 代码的运行方式，类似于 Web 浏览器。

要打开 DevTools，您可以：

  • 在开发者菜单中选择“打开 DevTools”。
  • 从 CLI（npx react-native start）中按 j。

首次启动时，DevTools 将打开一个欢迎面板，以及一个打开的控制台抽屉，您可以在其中查看日志并与 JavaScript 运行时交互。从窗口顶部，您可以导航到其他面板，包括集成的 React 组件检查器和性能分析器。

React Native DevTools opened to the "Welcome" pane

React Native DevTools 由内置于 React Native 的专用调试架构提供支持，并使用 Chrome DevTools 前端的自定义版本。这使我们能够提供熟悉、与浏览器一致的调试功能，这些功能深度集成并构建用于端到端可靠性。

在我们的 React Native DevTools 指南 中了解更多信息。

注意

React Native DevTools 仅适用于 Hermes 引擎，并且需要安装 Google Chrome 或 Microsoft Edge。

信息

Flipper 和其他调试工具​

React Native DevTools 取代了之前的 Flipper、实验性调试器和 Hermes 调试器（Chrome）前端。如果您使用的是旧版本的 React Native，请访问 您版本 的文档。

我们继续提供传统调试方法，例如直接 JSC 调试和远程 JS 调试（已弃用）（请参阅 其他调试方法）。

React Native DevTools 旨在调试 React 应用问题，而不是替代原生工具。如果您想检查 React Native 的底层平台层（例如，在开发原生模块时），请使用 Xcode 和 Android Studio 中提供的调试工具（请参阅 调试原生代码）。

其他有用链接

LogBox​

LogBox 是一款应用内工具，当您的应用记录警告或错误时会显示。

A LogBox warning and an expanded LogBox syntax error

注意

LogBox 在发布（生产）版本中被禁用。

致命错误​

当发生不可恢复的错误（例如 JavaScript 语法错误）时，LogBox 将打开并显示错误的位置。在这种状态下，LogBox 无法关闭，因为您的代码无法执行。一旦语法错误修复（通过快速刷新或手动重新加载），LogBox 将自动关闭。

控制台错误和警告​

控制台错误和警告显示为带有红色或黄色徽章的屏幕通知。

  • **错误** 将显示带有通知计数。点击通知以查看扩展视图并分页浏览其他日志。
  • **警告** 将显示一个不带详细信息的通知横幅，提示您打开 React Native DevTools。

当 React Native DevTools 打开时，除致命错误之外的所有错误都将隐藏在 LogBox 中。我们建议使用 React Native DevTools 中的控制台面板作为真相来源，因为各种 LogBox 选项可以隐藏或调整某些日志的级别。

💡 忽略日志

LogBox 可以通过 LogBox API 进行配置。

import {LogBox} from 'react-native';

忽略所有日志​

可以使用 LogBox.ignoreAllLogs() 禁用 LogBox 通知。这在某些情况下很有用，例如进行产品演示。

LogBox.ignoreAllLogs();

忽略特定日志​

可以通过 LogBox.ignoreLogs() 在每个日志的基础上禁用通知。这对于嘈杂的警告或无法修复的警告（例如，在第三方依赖项中）很有用。

LogBox.ignoreLogs([
  // Exact message
  'Warning: componentWillReceiveProps has been renamed',

  // Substring or regex match
  /GraphQL error: .*/,
]);
注意

LogBox 将把 React 的某些错误视为警告，这意味着它们不会显示为应用内错误通知。高级用户可以通过使用 LogBoxData.setWarningFilter() 自定义 LogBox 的警告过滤器来更改此行为。

性能监视器​

在 Android 和 iOS 上，可以通过在开发者菜单中选择**“性能监视器”**在开发过程中切换应用内性能覆盖。在此处 了解更多 有关此功能的信息。

The Performance Monitor overlay on iOS and Android

信息

性能监视器在应用内运行，仅供参考。我们建议在 Android Studio 和 Xcode 下调查原生工具，以获得准确的性能测量。