调试

访问 App 内的开发菜单​

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

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

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

[画像:React Native开发者菜单]

打开调试器​

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

npx react-native start --experimental-debugger

React DevTools​

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

npx react-devtools

[画像:一个 React 开发工具窗口]

LogBox​

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

[画像:A LogBox warning and an expanded LogBox syntax error]

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

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

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

import{LogBox}from'react-native';

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

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

语法错误​

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

性能监视器​

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

[画像:iOS和Android上的性能监视器叠加]