1,开发中的红屏和黄屏的问题
红屏或黄屏提示都只会在开发版本中显示,正式的离线包中是不会显示的。
A 红屏错误
应用内的报错会以全屏红色显示在应用中(调试模式下),我们称为红屏(red box)报错。你可以使用console.error()来手动触发红屏错误。
B 黄屏警告
应用内的警告会以全屏黄色显示在应用中(调试模式下),我们称为黄屏(yellow box)报错。点击警告可以查看详情或是忽略掉。 和红屏报警类似,你可以使用console.warn()来手动触发黄屏警告。 在默认情况下,开发模式中启用了黄屏警告。可以通过以下代码关闭:
console.disableYellowBox = true;
console.warn('YellowBox is disabled.');
你也可以通过代码屏蔽指定的警告,像下面这样设置一个数组:
console.ignoredYellowBox = ['Warning: ...'];
数组中的字符串就是要屏蔽的警告的开头的内容。(例如上面的代码会屏蔽掉所有以Warning开头的警告内容)
红屏和黄屏在发布版(release/production)中都是自动禁用的。
2,访问控制台日志
A 在运行RN应用时,可以在终端中运行如下命令来查看控制台的日志:
$ react-native log-ios
$ react-native log-android
此外,你也可以在iOS模拟器的菜单中选择Debug → Open System Log...
来查看。如果是Android应用,无论是运行在模拟器或是真机上,都可以通过在终端命令行里运行
adb logcat *:S ReactNative:V ReactNativeJS:V
命令来查看。
B Chrome开发者工具
在开发者菜单中选择"Debug JS Remotely"选项,即可以开始在Chrome中调试JavaScript代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui
在Chrome的菜单中选择Tools → Developer Tools
可以打开开发者工具,也可以通过键盘快捷键来打开(Mac上是Command⌘+ Option⌥+ IWindows上是Ctrl + Shift + I或是F12)。
打开有异常时暂停(Pause On Caught Exceptions)选项,能够获得更好的开发体验。
译注:Chrome中并不能直接看到App的用户界面,而只能提供console的输出,以及在sources项中断点调试js脚本。
目前无法正常使用React开发插件(就是某些教程或截图上提到的Chrome开发工具上多出来的React选项),但这并不影响代码的调试。如果你需要像调试web页面那样查看RN应用的jsx结构,暂时只能使用Nuclide的"React Native Inspector"这一功能来代替。
使用Chrome开发者工具来在设备上调试
对于iOS真机来说,需要打开 RCTWebSocketExecutor.m
文件,然后将其中的"localhost"改为你的电脑的IP地址,最后启用开发者菜单中的"Debug JS Remotely"选项。
对于Android 5.0+设备(包括模拟器)来说,将设备通过USB连接到电脑上后,可以使用adb
命令行工具来设定从设备到电脑的端口转发:
adb reverse tcp:8081 tcp:8081
如果设备Android版本在5.0以下,则可以在开发者菜单中选择"Dev Settings - Debug server host for device",然后在其中填入电脑的”IP地址:端口“。
如果在Chrome调试时遇到一些问题,那有可能是某些Chrome的插件引起的。试着禁用所有的插件,然后逐个启用,以确定是否某个插件影响到了调试。