React Native - 调试
React Native - 调试
Section titled “React Native - 调试”React Native 提供了几种强大的工具和方法来帮助你有效地调试应用程序。
开发者菜单 (Developer Menu)
Section titled “开发者菜单 (Developer Menu)”你可以在应用中访问开发者菜单。在 iOS 模拟器上，按下 Cmd + D。在 Android 模拟器上，按下 Cmd + M（Windows/Linux）或 Ctrl + M（在某些 Windows/Linux 模拟器上）或 Cmd + M (macOS)。对于真机，可以摇晃设备打开菜单。
开发者菜单提供以下选项：
- Reload (重新加载): 重新加载应用的 JavaScript bundle (打包文件)。快捷键：iOS 模拟器上是
Cmd + R，或者在 Metro Bundler 终端中双击键盘上的R。 - Debug (调试): 在你的网页浏览器（例如 Chrome DevTools）中打开 JavaScript 调试器。这允许你设置断点、检查变量和执行代码。你也可以使用 IDE（如 VS Code）中的断点。
- Enable/Disable Fast Refresh (启用/禁用 Fast Refresh): 允许在修改 JavaScript 代码后立即更新应用，而不会丢失组件状态。这是对 ‘Live Reload’ 的改进。
- Toggle Element Inspector (切换元素检查器): 允许你直接在屏幕上检查 UI 元素、它们的样式和层级。
- Show/Hide Performance Monitor (显示/隐藏性能监视器): 显示一个叠加层，其中包含实时性能指标，如 FPS（帧率）、RAM 使用率和 JavaScript 线程性能。
- Open React DevTools (打开 React DevTools): 如果你安装了 React DevTools，此选项（或类似选项）可能会出现，用于启动独立的 DevTools，检查 React 组件树、属性 (
props) 和状态 (state)。 - Enable/Disable Network Inspect (启用/禁用网络检查): 允许使用 Flipper 或调试器的 Network (网络) 标签页监控网络请求。
现代调试工具
Section titled “现代调试工具”除了内置的开发者菜单，还可以考虑以下现代工具：
- React DevTools: 一个独立的应用程序（或针对网页的浏览器扩展），允许你检查 React 组件层级、属性 (
props)、状态 (state) 和hooks。它是 React Native 开发不可或缺的工具。你可以全局安装它：npm install -g react-devtools。 - Flipper: 一个功能强大的平台，用于调试 iOS、Android 和 React Native 应用。它可以通过插件进行扩展，并提供崩溃报告、网络检查、布局检查、共享偏好设置/数据库查看等功能。访问 fbflipper.com 获取更多详情。
- LogBox: React Native 重新设计的系统，用于直接在应用中显示错误、警告和日志。它提供了更多上下文和更好的格式，以便更轻松地进行调试。
- IDE Debuggers (IDE 调试器): 现代 IDE，如 Visual Studio Code，为 React Native 提供了强大的调试功能，允许你直接在编辑器中设置断点、逐行执行代码和检查变量。