跳至主内容
版本：当前版本

调试基础

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

备注

调试功能（如开发者菜单、LogBox 和 React Native DevTools）在发布（生产）版本中会被禁用。

打开开发者菜单​

React Native 提供了内置的开发者菜单用于访问调试功能。您可以通过摇动设备或使用键盘快捷键打开开发者菜单：

  • iOS 模拟器：Ctrl + Cmd ⌘ + Z（或选择 Device > Shake）

  • Android 模拟器：Cmd ⌘ + M（macOS）或 Ctrl + M（Windows 和 Linux）

替代方案（Android）：adb shell input keyevent 82。

React Native 开发者菜单

打开 DevTools​

React Native DevTools 是我们为 React Native 内置的调试器。它让您可以像在网页浏览器中那样检查并理解 JavaScript 代码的运行情况。

打开 DevTools 有两种方式：

  • 在开发者菜单中选择 "Open DevTools"。

  • 在命令行界面中按下 j。

打开的 React Native DevTools 显示“欢迎”面板

首次启动时，DevTools 会显示欢迎面板，同时打开控制台抽屉供您查看日志并与 JavaScript 运行时交互。您可以通过窗口顶部的导航栏访问其他面板，包括集成的 React 组件检查器和性能分析器。

了解更多请参阅我们的 React Native DevTools 指南。

LogBox​

LogBox 是应用内显示警告和错误日志的工具。

LogBox 警告和展开的语法错误示例

致命错误​

当发生不可恢复的错误（如 JavaScript 语法错误）时，LogBox 会打开并显示错误位置。此时 LogBox 无法关闭，因为代码无法执行。LogBox 会在语法错误修复后自动关闭——无论是通过快速刷新（Fast Refresh）还是手动重新加载。

控制台错误与警告​

控制台错误和警告会以屏幕通知形式显示，带有红色或黄色标识。

  • 错误显示时包含通知计数。点击通知可查看详情并翻阅其他日志。

  • 警告显示通知横幅但不包含细节，提示您打开 React Native DevTools。

当 React Native DevTools 处于开启状态时，除致命错误外的所有错误都会被 LogBox 隐藏。由于 LogBox 的各种设置可能隐藏或调整某些日志级别，我们建议将 React Native DevTools 中的控制台面板作为主要信息来源。

💡 Ignoring logs

LogBox can be configured via the LogBox API.

js
import {LogBox} from 'react-native';

Ignore all logs​

LogBox notifications can be disabled using LogBox.ignoreAllLogs(). This can be useful in situations such as giving product demos.

js
LogBox.ignoreAllLogs();

Ignore specific logs​

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.

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

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

LogBox will treat certain errors from React as warnings, which will mean they don't display as an in-app error notification. Advanced users can change this behaviour by customising LogBox's warning filter using LogBoxData.setWarningFilter().

性能监控器​

在 Android 和 iOS 上，开发过程中可通过开发者菜单选择 "Perf Monitor" 来切换应用内性能悬浮窗。详细了解此功能请访问性能文档。

iOS 和 Android 上的性能监控器悬浮窗

信息

性能监控器在应用内运行，仅供参考。我们建议使用 Android Studio 和 Xcode 的原生工具进行精确的性能测量。