【Hybrid开发高级系列】ReactNative(二) —— React Native调试专题
【Hybrid开发高级系列】ReactNative(二) —— React Native调试专题
1 调试配置步骤
1.1 访问App内的开发菜单
????????你可以通过摇晃你的设备或者选择iOS模拟器的Hardware菜单中的“Shake Gesture”来打开开发者菜单。你还可以在app运行于iPhone模拟器时使用Command+D快捷键，或者在运行Android模拟器时使用Command+M快捷键。
????????注意：在成品(release/producationbuilds)中开发者菜单会被关闭。
1.2 刷新JavaScript
????????不用每次你有改变时都重新编译你的app，你可以直接重载你app的JavaScript代码。要这样做，就选择开发者菜单中的”Reload“。你也可以在iOS模拟器中按Command+R或者在Android模拟器中按两次R。
????????如果Command+R快捷键没能重载iOS模拟器，去往Hardware菜单，选择Keyboard，然后确保“Connect HardwareKeyboard”是勾选的。
1.3 自动重载
????????你可以通过让你的app在你改变代码时自动重载来加快你的开发速度。自动重载可以在开发者菜单中选择“Enable Live Reload”来打开。
????????更进一步你可能想在添加新文件到JavaScript包中时保持app运行新的版本，可以通过选择开发者菜单中的“EnableHot Reloading”来打开。这可以让你在重载中保持app的状态。
????????有一些热重载无法完美实现的情况。如果运行到了任何问题，使用全重载来重置你的app。
????????对于下面这些情况你可能需要重构你的app来让改变生效：
????? 你添加了新的资源到你原生app的包中，比如iOS的Images.xcassets中的图片或者Android的res/drawable文件夹。
????? 你修改了原生代码(iOS上的Objective-C/Swift或者Android中的Java/C++).
1.4 应用内的错误与警告提示(红屏和黄屏)
????????错误和警告会在开发构建时显示在你的app中。
1.4.1 错误(Errors)
????????app中的错误会在你的app中用红色背景的全屏显示。这个屏幕也叫RedBox。你可以使用console.error()来手动触发一个。
1.4.2 警告(Warnings)
????????警告会在屏幕上用黄色背景显示。这些警告条也叫YellowBox。点击警告条来显示更多信息或者让它们不显示。
????????和RedBox一样，你可以使用console.warn()来触发一个YellowBox。
????????YellowBox可以通过使用console.disableYellowBox = true;来在开发过程中关闭。特定的警告可以通过设置要忽略的前缀数组来说的手动忽略：console.ignoredYellowBox= [‘Warning:…’]
????????RedBox和YellowBox在发布构建中都是自动关闭的.
1.5 访问控制台日志
????????app运行时你可以通过在终端使用下面的命令为iOS和Android app显示控制台日志：
react?nativelog?ios
react-native log-android
????????你也可以通过在iOS模拟器中访问Debug -> Open System Log… 或者在Androidapp在设备或者模拟器上运行时在终端中运行adb logcat *:S ReactNative:VReactNativeJS:V。
1.6 Chrome开发者工具
????????在开发者菜单选择“Debug JS Remotely”来在Chrome中调试JS代码。这会打开一个新的tab为http://localhost:8081/debugger-ui。
????????在Chrome的菜单中选择Tools -> Developer Tools来打开开发者工具。你也可以使用快捷键(Mac上为Command+Option+I，Windows上为Ctrl+Shift+I)来访问开发者工具。你可能还会打开PauseOn Caught Exceptions来获取更好的调试体验。
????????现在还不可能在Chrome开发者工具中使用“React”tab来检查app小部件。你可以使用Nuclide的“React NativeInspector”作为工作区。
1.6.1 使用Chrome开发者工具在设备上调试
????????在iOS设备上，打开RCTWebSocketExecutor.m文件并将“localhost”改为你电脑的IP，然后在开发者菜单中选择“Debug JS Remotely”.
????????在通过USB连接的Android 5.0+设备上，你可以使用adb commandline tool来设置端口从设备转发到你的电脑：
adb reverse tcp:8081 tcp:8081
????????或者，在开发者菜单选择“Dev Settings”，然后更新“Debug server host for device”的设置来匹配你电脑的IP地址。
????????如果运行到任何问题，可能是你的某个Chrome扩展程序不小心干扰了调试器。尝试禁用所有的扩展器然后重新一个个地打开它们直到你找到有问题的扩展程序。
1.6.2 使用自定义的JS调试器
????????设置REACT_DEBUGGER环境变量为启动你的自定义调试器的命令来使用自定义的JS调试器来代替Chrome开发者工具。然后你就可以在开发者菜单中选择“Debug JS Remotely”来开始调试。
????????调试器会接收一系列所有的项目根，通过空间分隔开。比如说，如果你设置REACT_DEBUGGER=”node/path/to/launchDebugger.js–port2345–type ReactNative”，然后node/path/to/launchDebugger.js–port 2345–type ReactNative /path/to/reactNative/app命令会被用来启动你的调试器。
????????通过这种方式执行的自定义调试器命令应该是短周期的进程，并且它们不应该产生超过200千字节的输出。
1.6.3 在Android上用Stetho调试
????1、在android/app/build.gradle中，添加
compile‘com.facebook.stetho:stetho:1.3.1’
compile‘com.facebook.stetho:stetho-okhttp3:1.3.1’
????2、在android/app/src/main/java/com/{yourAppName}/MainApplication.java中，添加下面的导入：
import com.facebook.react.modules.network.ReactCookieJarContainer;
import com.facebook.stetho.Stetho;
import okhttp3.OkHttpClient;
importcom.facebook.react.modules.network.OkHttpClientProvider;
importcom.facebook.stetho.okhttp3.StethoInterceptor;
import java.util.concurrent.TimeUnit;
????3、在android/app/src/main/java/com/{yourAppName}/MainApplication.java中，添加函数：
public void onCreate() {
????super.onCreate();
????Stetho.initializeWithDefaults(this);
????OkHttpClient client = newOkHttpClient.Builder().connectTimeout(0, TimeUnit.MILLISECONDS)
????????.readTimeout(0, TimeUnit.MILLISECONDS)
????????.writeTimeout(0, TimeUnit.MILLISECONDS)
????????.cookieJar(new ReactCookieJarContainer())
????????.addNetworkInterceptor(newStethoInterceptor())
????????.build();
? ? OkHttpClientProvider.replaceOkHttpClient(client);
}
????4、运行react-nativerun-android
????5、在新的chrome标签中，打开：chrome://inspect，点击 ‘Inspectdevice’ (“Powered by Stetho”后面的那个)
1.7 调试原生代码
????????当使用原生代码时(比如编写原生组件时)你可以和构建标准的原生app一样在Android Studio或者Xcode启动app并获取其调试功能(设置断点等等)。
1.8 性能监控
????????你可以通过在开发者菜单中选择“Perf Monitor”打开一个性能覆盖来帮助你调试性能问题。
翻译自React Native官方文档
版权所有：http://blog.csdn.net/cloudox_
2 RN-IOS模拟器调试
3 参考链接
3分钟带你玩转ReactNative研发所有调试技巧
http://www.tuicool.com/articles/qUjI3aa
如何使用Atom+Nuclide调试React-Native应用
http://blog.csdn.net/zhangbuzhangbu/article/details/52661174
ReactNative调试
http://blog.csdn.net/caroline_wendy/article/details/50107841
(Good)ReactNative调试方法