跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽，抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.75

调试

访问 App 内的开发菜单​

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

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

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

React Native开发者菜单

note

在发布（release）版本中开发者菜单将无法使用。

打开调试器​

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

info

在 Expo 项目中，在命令行界面中按下 j 键直接打开 Hermes 调试器。

Flipper 是一个本地调试工具，通过嵌入的 Chrome DevTools 面板为 React Native 提供 JavaScript 调试功能。

要在 Flipper 中调试 JavaScript 代码，请从 Dev 菜单中选择 "Open Debugger"。了解有关 Flipper 的更多信息。

info

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

Flipper 桌面应用打开的 Hermes 调试器面板

warning

使用 Flipper 调试 React Native 应用在 React Native 0.73 版本中已弃用。我们最终将删除通过 Flipper 进行 JS 调试的内置集成（但你仍然可以手动添加集成）。

React DevTools​

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

npx react-devtools

一个 React 开发工具窗口

tip

学习如何使用 React 开发工具！

LogBox​

开发版本中的错误和警告会在您的应用程序内部的 LogBox 中显示。

A LogBox warning and an expanded LogBox syntax error

注意

LogBox 在发布版本（release）中是自动禁用的。

控制台的错误与警告提示​

控制台错误和警告以红色或黄色徽章的形式显示为屏幕通知，并分别显示控制台中的错误或警告数量。要查看控制台中的错误或警告，点击通知以查看有关日志的完整信息，并在控制台中浏览所有日志。

可以使用LogBox.ignoreAllLogs()来隐藏这些通知。例如，在进行产品演示时非常有用。此外，还可以通过LogBox.ignoreLogs()来针对特定的日志隐藏通知。当存在无法修复的嘈杂警告（比如第三方依赖项）时，这非常有用。

info

忽略日志只应作为最后的手段。请记得给自己创建任务或者注释，提醒自己修复任何被忽略的日志。

import {LogBox} from 'react-native';

// 根据字符串匹配来忽略日志信息
LogBox.ignoreLogs(['Warning: ...']);

// 忽略所有日志信息
LogBox.ignoreAllLogs();

语法错误​

当发生 JavaScript 语法错误时，LogBox 将显示错误的位置。在这种状态下，LogBox 无法关闭，因为无法执行您的代码。一旦语法错误被修复，LogBox 将自动关闭 - 无论是通过快速刷新还是手动重新加载。

性能监视器​

在 Android 和 iOS 上，在开发过程中可以通过在开发菜单中选择 "Perf Monitor" 来切换应用内性能叠加。有关此功能的更多信息，请参阅此处。

iOS和Android上的性能监视器叠加

info

性能监视器在应用中运行，仅作参考。我们建议使用 Android Studio 和 Xcode 中的本地性能工具来获得更准确的性能测量。