React Native开发调试技巧

PS：

对于刚接触React Native不久的开发者来说，未掌握高效的调试方法，还要时不时面对红屏和黄屏，无法快速定位问题，无疑让开发者崩溃，在此给大家介绍一些React Native的开发调试技巧，希望能帮到你。

由于React Native提供了Hot Reloading机制，也让开发者体验到了相对原生开发更高效的调试方式。现在我们一起体验一下几种不同的调试方式：

一、运行命令:

更多React Native开发常用命令可以戳这里

**iOS：**
xcrun simctl list devices //查看具体可用的设备名称
react-native run-ios //不同版本的React Native,默认启动的模拟器也不一样，目前最新版本启动的是iPhone XR
react-native run-ios --simulator "iPhone 7s" //使用--simulator参数，在其后加上要使用的设备名称来指定要模拟的设备类型

Command⌘ + R // 模拟器reload 界面
Command⌘+D //快速打开窗口模式 (可以点击remote debug)
ctrl+alt+回车 //可以直接开启chrome remote debug 模式
Command⌘+option + J（chrome）//chrome 弹出debug窗口模式，调试的具体日志

**Android：**
adb devices //查看可用调试设备
react-native run-android //连接真机时，会启动真机；打开有模拟器时，会运行到模拟器
R,R //连续点击两次R键， 模拟器reload 界面
Command⌘ + M（windows 上可能是 F1 或者 F2） //快捷键来快速打开Developer Menu
adb shell input keyevent 82 //发送菜单键命令

注意：
1.在 iOS 模拟器上调试，请务必确保模拟器的 Hardware 菜单中，Keyboard 选项下的"Connect Hardware Keyboard"处于开启状态，否则按键是没有响应的。
2.在发布（production）版本中开发者菜单将无法使用。

二、Developer menu使用

1.调出Developer menu

我们用快捷键打开Developer menu,可看到：

image.png

2.Developer menu选项介绍：

Reload----将js代码部分重新生成bundle，然后传输给模拟器或手机
Dubug JS Remotely ----远程调试（浏览器调试）
Enable Live Reload ----js修改后，自动刷新（会重启）
Start Systrace ---- 监控某段时间内的指标信息
Enable Hot Reloading----热加载，不中断app的运行，不丢失状态信息，动态注入修改后的内容
Toggle Inspector ----查看元素定位等信息
Show Perf Monitor----性能调试，实时显示内存占用、UI和js的FPS等信息

注意：Reload、Enable Live Reload、Enable Hot Reloading三种刷新方式的区别：Reload命令会将js代码部分重新生成bundle，然后传输给模拟器或手机；Enable Live Reload 会在js修改后，自动实时刷新（但等于会app重启，也就是会回到首页）；Enable Hot Reloading是热加载，不中断app的运行，不丢失状态信息，动态注入修改后的内容，不会回到首页，也就是不会重启

1.某些情况下 hot reload 并不能顺利实施。如果碰到任何界面刷新上的问题，请尝试手动完全刷新。
2.有些时候你必须要重新编译应用才能使修改生效：
增加了新的资源(比如给 iOS 的Images.xcassets或是 Andorid 的res/drawable文件夹添加了图片)
更改了任何的原生代码（objective-c/swift/java）

Toggle Inspector

可以用来查看元素定位等信息：

image.png

Dubug JS Remotely

默认在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui.(如果地址栏打开的是 ip 地址，则请自行改为 localhost)
页面打开后可以看到已经成功激活：

image.png

然后我们就能进行调试和查看log信息了：

image.png image.png

在 Chrome 的菜单中选择Tools → Developer Tools可以打开开发者工具，也可以通过键盘快捷键来打开（Mac 上是Command⌘ + Option⌥ + I，Windows 上是Ctrl + Shift + I或是 F12）。打开有异常时暂停（Pause On Caught Exceptions）选项，能够获得更好的开发体验。

注意：Chrome 中并不能直接看到 App 的用户界面，而只能提供 console 的输出，以及在 sources 项中断点调试 js 脚本。一些老的教程和文章会提到 React 的 Chrome 插件，这一插件目前并不支持 React Native，而且调试本身并不需要这个插件。不过你可以安装独立（非插件）版本的 React Developer Tools 来辅助查看界面布局，下文会讲述具体安装方法。

注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用功能更强大的第三方的react-native-debugger来进行观测。

Show Perf Monitor

性能调试，实时显示内存占用、UI和js的FPS等信息：

image.png

使用vscode调试（安装React Native Tools）

1.安装React Native Tools插件:

image.png

2.配置调试命令

image.png

根据需要添加iOS或Android的调试配置：

image.png

经过上面的步骤会生成一个launch.json文件，按照默认配置即可：

image.png

然后就可以debug了：
点击按钮，选择Debug iOS,相当于运行命令react-native run-ios，运行后会看到debug的调试菜单。

image.png

Xcode或Android Studio调试原生代码

在和原生代码打交道时（比如编写原生模块），可以直接从 Android Studio 或是 Xcode 中启动应用，并利用这些 IDE 的内置功能来调试（比如设置断点）。这一方面和开发原生应用并无二致。

注意：调试前，记得Stop JS Remotely。

访问控制台日志

在运行 RN 应用时，可以在终端中运行如下命令来查看控制台的日志：

$ react-native log-ios
$ react-native log-android

此外，你也可以在 iOS 模拟器的菜单中选择Debug → Open System Log...来查看。如果是 Android 应用，无论是运行在模拟器或是真机上，都可以通过在终端命令行里运行adb logcat *:S ReactNative:V ReactNativeJS:V命令来查看。

其它方式：

react-devtools
Safari Developer Tools

三、错误与警告提示（红屏和黄屏）

红屏错误

应用内的报错会以全屏红色显示在应用中（调试模式下），我们称为红屏（red box）报错。你可以使用console.error()来手动触发红屏错误。

黄屏警告

应用内的警告会以全屏黄色显示在应用中（调试模式下），我们称为黄屏（yellow box）报错。点击警告可以查看详情或是忽略掉。和红屏报警类似，你可以使用console.warn()来手动触发黄屏警告。在默认情况下，开发模式中启用了黄屏警告。可以通过以下代码关闭：

你也可以通过代码屏蔽指定的警告，像下面这样调用 ignoreWarnings 方法，参数为一个数组：

在 CI/Xcode 中，黄屏警告还可以通过设置IS_TESTING环境变量来控制启用与否。

红屏错误和黄屏警告在发布版（release/production）中都是自动禁用的。

参考：
http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading
https://reactnative.cn/docs/debugging.html#自动刷新
https://blog.csdn.net/young_emily/article/details/79005728