问题:在使用Laya制作H5时,并未使用native打包,而是使用了app包壳,也就是在另外一个app中打开H5页面。但是在游戏加载页面结束后,出现了黑屏。因为是手机环境,看不到控制台,所以排查很困难,后来找到了Fiddler。
一、Fiddler
参考
Fiddler教程
图解Fiddler如何抓手机APP数据包【超详细】
Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js,css等文件,这些都可以让你胡乱修改的意思)。 Fiddler 要比其他的网络调试器要更加简单,因为它不仅仅暴露http通讯还提供了一个用户友好的格式。
二、排查步骤
1.使用Fiddler查看了所有的加载文件,发现都是正常加载的。
2.回到项目中查看代码,发现在加载场景结束后,会自动移除,然后通过url中携带的参数自动登录后进入大厅界面。但是如果登录失败(token失效),则不会进入,直接return了,并且界面上没做提示,只是Console.log一下错误信息。这里想到了一个词叫静默失败,没有提示,连BUG都不好找。于是以为解决问题了,一阵忙碌,重新发布到release,还是黑屏……
3.没办法了,不能总是发布到release啊,需要用Fiddler把手机上APP要访问的url劫持到我本地。参考AutoResponder 快速引用和fiddler 配置rule
4.劫持设置好了,但是在本地的chrome发现有报错,难道是因为这个黑屏?
原来是有几个js加载失效了
后来,发现是autoResponder设置路径有问题,本地的js路径和release上的路径不一样,所以要注意autoResponder的匹配设置。在Fiddler中观察Host,结合Inspectors中的TextView可以确保文件有没有正确加载。
5.终于加载出本地的js和html了,简单的确认方法就是把本地的html随便改改,然后观察Inspectors中的TextView
6.但是还是看不到控制台,没办法,只能使用alert("xxx")来逐步缩小报错范围。最终锁定在Laya.LocalStorage
7.查了Laya的官方文档,参考LayaNative原生服务
LayaNative支持LocalStorage的使用,但是有格式要求,必须使用getItem()、setItem()来存储值以及取值
AS下的用法
//存储指定键名和键值,字符串类型。
LocalStorage.setItem("LayaBox","H5引擎!");
//获取指定键名的值。
LocalStorage.getItem("LayaBox");
JS和TS下的用法
//存储指定键名和键值,字符串类型。
Laya.LocalStorage.setItem("LayaBox","H5引擎!");
//获取指定键名的值。
Laya.LocalStorage.getItem("LayaBox");
错误的用法:
下面js语法的用法在PC端浏览器或者移动端(浏览器裸跑)支持,但是LayaNative下不支持
//存储,LayaNative下不支持
localStorage.test = 100;
//取值,LayaNative下不支持
alert(localStorage.test);
8.在我的代码里,使用了Laya.LocalStorage.setJSON。那么根据官方指导,全换成getItem()、setItem()吧,很简单,结合一下JSON.stringfy和parse方法,调整不大。但是,不行啊,还是黑屏。
9.没办法了,只能通过传入的url参数,解析一下,如果是APP包壳模式,那么不再使用Laya.LocalStorage,只是缓存到内存中,退出就失效。问题解决