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,可看到:
![4130078-3601e736d3b435fc.png](https://upload-images.jianshu.io/upload_images/4130078-3601e736d3b435fc.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
可以用来查看元素定位等信息:
![4130078-934d998914609600.png](https://upload-images.jianshu.io/upload_images/4130078-934d998914609600.png)
Dubug JS Remotely
默认在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui.(如果地址栏打开的是 ip 地址,则请自行改为 localhost)
页面打开后可以看到已经成功激活:
![4130078-3e8cd3deb0411fc3.png](https://upload-images.jianshu.io/upload_images/4130078-3e8cd3deb0411fc3.png)
![](/qrcode.jpg)
然后我们就能进行调试和查看log信息了:
![4130078-19ef386535952a54.png](https://upload-images.jianshu.io/upload_images/4130078-19ef386535952a54.png)
![4130078-3d4119645cd1b68d.png](https://upload-images.jianshu.io/upload_images/4130078-3d4119645cd1b68d.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等信息:
![4130078-7aa0c923ce643f3b.png](https://upload-images.jianshu.io/upload_images/4130078-7aa0c923ce643f3b.png)
使用vscode调试(安装React Native Tools)
1.安装React Native Tools插件:
![4130078-e5cd82c48b30b442.png](https://upload-images.jianshu.io/upload_images/4130078-e5cd82c48b30b442.png)
2.配置调试命令
![4130078-0901dc390473890e.png](https://upload-images.jianshu.io/upload_images/4130078-0901dc390473890e.png)
根据需要添加iOS或Android的调试配置:
![4130078-659fd72afa30b967.png](https://upload-images.jianshu.io/upload_images/4130078-659fd72afa30b967.png)
经过上面的步骤会生成一个launch.json文件,按照默认配置即可:
![4130078-da40f971ecf399b7.png](https://upload-images.jianshu.io/upload_images/4130078-da40f971ecf399b7.png)
然后就可以debug了:
点击按钮,选择Debug iOS,相当于运行命令react-native run-ios,运行后会看到debug的调试菜单。
![4130078-72a2897641f7e93b.png](https://upload-images.jianshu.io/upload_images/4130078-72a2897641f7e93b.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