ReactNative调试技巧
你是否知道，React Native开发者平均把37.6%的工作时间献给了调试黑箱？当热重载突然失效、红屏警告像午夜凶铃般闪现、安卓iOS双平台BUG像打地鼠般此起彼伏时，我们是否正在用21世纪的工具进行石器时代的debug
别急着给node_modules办葬礼，当console.log大军压境时，你需要的不是更多的日志，本文以ReactNative开发框架Expo为基础展开，介绍一套让React Native调试从玄学变科学的组合拳——从Hermes引擎的火焰图到DevTool的调试技巧，让我们开启这场让BUG无处遁形的技术狩猎
基本调试
React Native提供了一个应用内开发者菜单，提供调试功能。你可以通过摇动设备或通过键盘快捷键进入开发菜单
- iOS模拟器:
Ctrl + Cmd ⌘ + Z (or Device > Shake) - Android模拟器：
Cmd ⌘ + M (macOS) or Ctrl + M (Windows and Linux)
在不同平台的模拟器上通过以上的快捷键打开内部的调试面板
内置的支持多种调试方式，如：性能监控、元素检查等等
LogBox
LogBox是一个应用内工具，当你的应用记录了警告或错误时，它会显示出来。类似于现在Web开发中一些工具，如：vite错误提示、webpack错误提示插件等等
当出现不可恢复的错误（例如JavaScript语法错误）时，LogBox将打开并显示错误的位置。在这种状态下，LogBox是不可解散的，因为您的代码无法执行。一旦语法错误通过快速刷新或手动重新加载修复，LogBox将自动消失
性能监控
在Android和iOS上，可以通过在开发菜单中选择“性能监视器”来切换应用程序内的性能覆盖
注意：性能监视器运行在应用程序内，是一个简单指标。建议研究Android Studio和Xcode下的本地工具，以获得准确的性能测量
Terminal Log
代码中所有的Log都会在控制台中同步打印
React Native DevTool
在开发时运行App后，终端会展示很多快捷方式信息，其中有一条open debugger很明显
我们直接按照提示按j键就可以打开React Native DevTool了 
组件调试
如果你开发ReactWeb应用程序应该会用到React Development Tool调试插件，此插件同样对ReactNative生效。如果你已经安装了，此时应该会看到Components tab 面板
Log
ReactNative DevTool和Chrome DevTool基本没啥区别，比如在源码中我们使用log打印信息
export default function SettingsPage() {
console.log("settings...")
return <h1>Setting Page</h1>
}当打开Setting页面时可以在DevTool控制台中看到对应的log信息
源码调试
在DevTool顶部中点击Source面板可以看到ReactNative项目对应的源码映射文件，你只需要在对应的文件中打断点即可
同样的可以看到在进入Setting页面时就会自动卡在断点那里了
其他
初次之外还有几种其他的调试方式，由于它是基于Chrome DevTool实现的，所以在Chrome中的调试功能它基本上都有，在上方面板中可以看到：Network、Memory、Profiler
Debug Native IDE
当使用本地代码时，例如编写本地模块时，您可以从Android Studio或Xcode启动应用程序，并利用本地调试功能（设置断点等），就像构建标准的本地应用程序一样
另一种选择是使用React native CLI运行应用程序，并将本地IDE （Android Studio或Xcode）的本地调试器附加到该过程中
Xcode
在Xcode上点击顶部菜单栏的“Debug”，选择“Attach to process”选项，在“Likely Targets”列表中选择该应用程序
Android Studio
在Android Studio上，你可以通过打开菜单栏上的“Run”选项，点击Attach to Process并选择正在运行的React Native应用程序来做到这一点
真机调试
默认在Expo的加持下真机调试变得更加简单，选择需要测试的真机，直接扫描终端中的二维码在手机设备中打开即可。默认会执行以下步骤：
- 如果没有Expo App，手机将会安装Expo
- 拉取当前的App
- 真机将会自动启动App
这样就可以调试了
这里本人使用iPhone打开App
接着可以继续通过DevTool或者相关快捷方式进行调试
感谢支持
