2017-09-08 21:46:39

React Native的调试

本文记录一下RN调试的相关东西。

TouchableNativeFeedback涟漪报错

问题是TouchableNativeFeedback涟漪内部计算用到了几个时间点, 而远程调试时其中一个时间点不是基于真机或者模拟器, 而是远程调试的电脑上的时间点, 两者时间没对齐误差超过500毫秒时就会报这个错, 解决办法是对齐电脑的时间

强制取值

根组件渲染时有几率遇到一个bug: RN报错某个对象不存在, 然而尝试打印那个对象后发现内容一切正常而且RN也不报错了, 这时像下面一样简单取一下值即可

/* get value to avoid remote debugger bug */
secondaryColor
isNightMode

这个行为和Node的很多全局懒加载变量的表现一致, 举个栗子, Node给console做了懒加载以加快程序的加载速度, 然而event模块中提前用到console导致报错, 解决就是如上一样取一下值, 见Node的event模块第52行

React Native Debugger 真机调试时无法获取DOM树

RN进阶肯定得会调DOM树, 特别是DOM的样式, React Native Debugger算得上使用频率最高的RN调试工具, 安卓有个包也可以不过博主没有详细使用过

这个问题的原因是, RN自己监听localhost:8097, React Native Debugger也是监听localhost:8097, 然而真机调试时这俩localhost不是一台机器, 得用adb桥一下: adb reverse tcp:8097 tcp:8097

调试请求

调试Ajax请求

使用模拟器调试Ajax时非常尴尬,调试HTTPS接口时就更尴尬了,目前最好用的办法是开启远程调试后,重写RN的XHR,将其用chrome上的对象伪造,这样发起请求的实际上是chrome本身,所以在网络面板是肯定看得到请求相关参数的。

global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;

关于fetch

这里单独把RN的fetch拿出来说一下,默认情况下响应中的set-cookie字段会被原生层截取掉,当然这是正常的行为,如果必须拿到它,可以设置fetch的withCredentials为最宽松的跨域。

调试图片请求

上面的办法只能调试Ajax请求,遇到图片请求就比较尴尬了。此时只能上原生拦截器,例如安卓上的和这个PR里所描述的。

本文链接:https://smallpath.me/post/react-native-debug

-- EOF --