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

推荐阅读更多精彩内容

  • 转自:http://blog.csdn.net/quanqinyang/article/details/52215...
    古都长安西安吴彦祖阅读 2,923评论 0 1
  • iteration是你嘟嘟囔囔地带着错误的话,不断重复,直到你的意思变得非常清晰的过程,即——迭代。 将主观有缺陷...
    清风徐徐阅读 80评论 0 0
  • 去夏威夷旅行,当然不能错过潜水这项乐趣无穷的活动。夏威夷有不少适合潜水的地方,可以看到美丽的珊瑚,和同五彩缤纷的鱼...
    贝囡囡阅读 375评论 0 0
  • 史上最全的iOS面试题及答案 - CSDN博客 问之前的项目经验,如果重新做,你会怎么做,有哪些改进 1.字符串逆...
    一代骄马阅读 210评论 0 1
  • 2018年,是以我们相聚而开始的。
    Vivian_Shen阅读 31评论 0 0