闲来无事,折腾了一下本地反应,相比之前,开发体验好了不少。但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的错误。
遇到类似问题的同学应该不少,这里做下记录,有需要的可以参考下。
首先,在真机上加载运行RN应用(过程略)。
然后,摇动手机,弹出开发菜单,选择“远程调试JS”。
铬会自动打开调试界面,地址是http://localhost: 8081/debugger-ui。打开控制台,找到想要调试的文件,加断点,搞的定。
理想情况下,上述步骤后,就可以愉快地断点调试了。但实际情况并没有这么顺利,按照官方指引修改了主机后,问题依然存在。
在控制台看到的错误信息如图所示,跨域资源加载出错.192.168.3.126是本机内网的ip,而出错资源的域名是192.168.3.126.xip.io。
在未对RN有深入了解的情况下,想到两种思路,后文会分别讲述细节。
让加载出错的资源,跟调试页面变成同源的
让调试服务支持资源跨域加载
将localhost替换成192.168.3.126.xip.io,也就是说,我们通过http://192.168.3.126.xip。io: 8081/debugger-ui来访问调试界面。
调试界面正常访问,资源加载正常,做。
192.168.3.126.xip。io这个主机名看着有点奇怪,后文会进一步介绍背后的原理。
在github JS远程调试的问题《歌珥问题当使用xip.io》里,有开发者反馈了同样的错误。
他是这样解决的:
找到node_modules/地铁模块,修改服务器/index.js index.js.flow文件,在_processDeltaRequest方法里加上下面代码。
这个方法不推荐,不过如果急着调试的话也不妨试下。
看到这个主机名不少同学可能一脸懵逼,一个似乎不存在的主机名怎么可以访问成功。
在控制台下平了一下返回的是192.168.3.126这个ip。
其实很简单,xip.io是个特殊的域名,当你查询xxx.xip.io这个域名对应的ip地址时,它会直接返回xxx。
举例:笔者笔记本的内网ip地址是192.168.3.126,当我访问192.168.3.126.xip。io、DNS查询返回的ip地址就是192.168.3.126。
它的原理也很简单,xip。io的持有者在公网自建了DNS解析服务,当用户发起xxx.xip。io的DNS查询时,它会直接把xxx返回。
前面提到的跨域解决方案,其实都不尽如人意,如有更好的方案,请告诉笔者,谢谢。
http://xip.io/
歌珥问题JS远程调试时使用xip.io
调试与Chrome开发工具设备
以上这篇反应本地真机断点调试+跨域资源加载出错问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
