Skip to main content

调试基础知识

访问开发菜单​

¥Accessing the Dev Menu

React Native 提供了一个应用内开发者菜单，其中提供了多个调试选项。你可以通过摇动设备或通过键盘快捷键来访问开发菜单：

¥React Native provides an in-app developer menu which offers several debugging options. You can access the Dev Menu by shaking your device or via keyboard shortcuts:

  • iOS 模拟器：Cmd ⌘ + D（或设备 > 摇动）

    ¥iOS Simulator: Cmd ⌘ + D (or Device > Shake)

  • 安卓模拟器：Cmd ⌘ + M (macOS) 或 Ctrl + M（Windows 和 Linux）

    ¥Android emulators: Cmd ⌘ + M (macOS) or Ctrl + M (Windows and Linux)

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

¥Alternatively for Android devices and emulators, you can run adb shell input keyevent 82 in your terminal.

The React Native Dev Menu

注意

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

¥The Dev Menu is disabled in release (production) builds.

打开调试器​

¥Opening the Debugger

调试器允许你了解和调试 JavaScript 代码的运行方式，类似于 Web 浏览器。

¥The debugger allows you to understand and debug how your JavaScript code is running, similar to a web browser.

信息

在 Expo 项目中，在 CLI 中按 j 可直接打开 Hermes 调试器。

¥In Expo projects, press j in the CLI to directly open the Hermes Debugger.

Flipper 是一个原生调试工具，它通过嵌入式 Chrome DevTools 面板为 React Native 提供 JavaScript 调试功能。

¥Flipper is a native debugging tool which provides JavaScript debugging capabilities for React Native via an embedded Chrome DevTools panel.

要在 Flipper 中调试 JavaScript 代码，请从开发菜单中选择 "打开调试器"。了解有关 Flipper 此处 的更多信息。

¥To debug JavaScript code in Flipper, select "Open Debugger" from the Dev Menu. Learn more about Flipper here.

信息

要使用 Flipper 进行调试，Flipper 应用必须是 安装在你的系统上。

¥To debug using Flipper, the Flipper app must be installed on your system.

The Flipper desktop app opened to the Hermes debugger panel

警告

使用 Flipper 调试 React Native 应用是 在 React Native 0.73 中已弃用。我们最终将删除通过 Flipper 对 JS 调试的开箱即用支持。

¥Debugging React Native apps with Flipper is deprecated in React Native 0.73. We will eventually remove out-of-the box support for JS debugging via Flipper.

提示

替代调试工具​

¥Alternative debugging tools

随着 React Native 从 Flipper 过渡，我们建议使用其他现有方法（包括第一方 IDE）来检查应用的原生代码和行为。

¥As React Native transitions away from Flipper, we recommend other existing methods, including first party IDEs, to inspect your application's native code and behaviour.

React 开发工具​

¥React DevTools

你可以使用 React DevTools 检查 React 元素树、属性和状态。

¥You can use React DevTools to inspect the React element tree, props, and state.

npx react-devtools

A React DevTools window

提示

了解如何使用 React DevTools！

¥Learn how to use React DevTools!

LogBox​

开发版本中的错误和警告显示在应用内的 LogBox 中。

¥Errors and warnings in development builds are displayed in LogBox inside your app.

A LogBox warning and an expanded LogBox syntax error

注意

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

¥LogBox is disabled in release (production) builds.

控制台错误和警告​

¥Console Errors and Warnings

控制台错误和警告显示为带有红色或黄色徽章的屏幕通知以及通知计数。要查看有关错误或警告的更多信息，请点击通知以查看展开的视图并对其他日志进行分页。

¥Console errors and warnings are displayed as on-screen notifications with a red or yellow badge, and a notification count. To see more about an error or warning, tap the notification to see an expanded view and to paginate through other logs.

可以使用 LogBox.ignoreAllLogs() 禁用 LogBox 通知。例如，这在进行产品演示时非常有用。此外，还可以通过 LogBox.ignoreLogs() 以每个日志为基础禁用通知。这对于嘈杂的警告或无法修复的警告很有用，例如 在第三方依赖中。

¥LogBox notifications can be disabled using LogBox.ignoreAllLogs(). This can be useful when giving product demos, for example. Additionally, notifications can be disabled on a per-log basis via LogBox.ignoreLogs(). This can be useful for noisy warnings or those that cannot be fixed, e.g. in a third-party dependency.

信息

忽略日志作为最后的手段，并创建一个任务来修复任何被忽略的日志。

¥Ignore logs as a last resort and create a task to fix any logs that are ignored.

import {LogBox} from 'react-native';

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

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

// Ignore all log notifications
LogBox.ignoreAllLogs();

语法错误​

¥Syntax Errors

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

¥When a JavaScript syntax error occurs, LogBox will open with the location of the error. In this state, LogBox is not dismissable since your code cannot be executed. LogBox will automatically dismiss once the syntax error is fixed — either via Fast Refresh or after a manual reload.

性能监视器​

¥Performance Monitor

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

¥On Android and iOS, an in-app performance overlay can be toggled during development by selecting "Perf Monitor" in the Dev Menu. Learn more about this feature here.

The Performance Monitor overlay on iOS and Android

信息

性能监视器在应用内运行并且是一个指南。我们建议研究 Android Studio 和 Xcode 下的原生工具，以进行准确的性能测量。

¥The Performance Monitor runs in-app and is a guide. We recommend investigating the native tooling under Android Studio and Xcode for accurate performance measurements.