第28章 React Native 调试基础

版本：0.77 调试基础 注意：调试功能（如开发者菜单、LogBox 和 React Native DevTools）在发布（生产）构建中是禁用的。 打开开发者菜单​ React Native 提供了一个应用内开发者菜单，用于访问调试功能。你可以通过摇动设备或快捷键打开它： iOS 模拟器：Ctrl + Cmd ⌘ + Z（或 设备 > 摇一摇） Android 模拟器：Cmd ⌘ + M（macOS）或 Ctrl + M（Windows 和 Linux） Android 替代方案：adb shell input keyevent 82。 打开 DevTools​ React Native DevTools 是 React Native 内置的调试器。它让你能够检查和理解 JavaScript 代码的运行方式，类似于 Web 浏览器。 打开 DevTools 的方式有： 在开发者菜单中选择“打开 DevTools”。 在 CLI（npx react-native start）中按 j 键。 首次启动时，DevTools 会打开一个欢迎面板，并附带一个展开的控制台抽屉，你可以在此查看日志并与 JavaScript 运行时交互。从窗口顶部，你可以导航到其他面板，包括集成的 React 组件检查器和 Profiler。 React Native DevTools 由 React Native 内置的专用调试架构驱动，使用定制版的 Chrome DevTools 前端。这使我们能够提供熟悉的、符合浏览器习惯的调试功能，这些功能深度集成并专为端到端可靠性设计。 在我们的 React Native DevTools 指南中了解更多。 注意：React Native DevTools 仅适用于 Hermes 引擎，需要安装 Google Chrome 或 Microsoft Edge。 info Flipper 和其他调试工具​ React Native DevTools 取代了之前的 Flipper、Experimental Debugger 和 Hermes 调试器（Chrome）前端。如果你使用的是较旧版本的 React Native，请参阅对应版本的文档。我们继续提供传统的调试方法，例如直接 JSC 调试和远程 JS 调试（已弃用）（见其他调试方法）。React Native DevTools 旨在调试 React 应用层面的问题，而非替代原生工具。如果你想检查 React Native 的底层平台（例如，在开发 Native Module 时），请使用 Xcode 和 Android Studio 中可用的调试工具（见调试原生代码）。其他有用的链接： 为什么你的 React Native 应用不需要 Flipper……以及如何在没有它的情况下工作 ↗ LogBox​ LogBox 是一个应用内工具，当你的应用记录警告或错误时，它会显示出来。 致命错误​ 当发生不可恢复的错误（如 JavaScript 语法错误）时，LogBox 会打开并显示错误位置。在此状态下，LogBox 无法关闭，因为你的代码无法执行。一旦通过 Fast Refresh 或手动重新加载修复了语法错误，LogBox 会自动消失。 控制台错误和警告​ 控制台错误和警告会以带有红色或黄色徽章的屏幕通知形式显示。 错误会显示通知计数。轻点通知可查看扩展视图并分页浏览其他日志。 警告会显示一个不带详细信息的通知横幅，提示你打开 React Native DevTools。 当 React Native DevTools 打开时，除致命错误外的所有错误都会被 LogBox 隐藏。我们建议使用 React Native DevTools 中的控制台面板作为信息源，因为 LogBox 的各种选项可能会隐藏或调整某些日志级别。 💡 忽略日志 LogBox 可通过 LogBox API 配置。 JavaScript import {LogBox} from 'react-native';
忽略所有日志​可以使用 LogBox.ignoreAllLogs() 禁用 LogBox 通知。这在展示产品 Demo 等场景下非常实用。JavaScript LogBox.ignoreAllLogs();
忽略特定日志​可以通过 LogBox.ignoreLogs() 逐条禁用日志通知。对于产生大量干扰的警告或无法修复的问题（例如来自第三方依赖的问题），这一功能十分有用。JavaScript LogBox.ignoreLogs([ // 精确匹配消息 'Warning: componentWillReceiveProps has been renamed', // 子串或正则表达式匹配 /GraphQL error: .*/, ]);
注​LogBox 会将 React 的某些错误视为警告，这意味着它们不会以应用内错误通知的形式显示。高级用户可以通过使用 LogBoxData.setWarningFilter() 自定义 LogBox 的警告过滤器来更改此行为。 性能监视器​ 在 Android 和 iOS 上，开发过程中可以通过在“开发菜单”中点击“Perf Monitor”来切换应用内的性能叠加层。在此处了解更多关于此功能的信息。 info​性能监视器运行于应用内，仅作为参考指南。我们建议使用 Android Studio 和 Xcode 下方的原生工具进行精确的性能测量。