博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ionic 调试 "死亡白屏"
阅读量:5741 次
发布时间:2019-06-18

本文共 1579 字,大约阅读时间需要 5 分钟。

死亡白屏(White Screen of Death)

我想“死亡白屏”应该是不需要解释的,开发过ionic app的童鞋应该都有遇到过,这里解释以防读者没有听说过:“可能在浏览器中调试时一切正常,当你在真机或模拟器上测试时不正常,当app启动时只有空白的页面”。

在我的开发中,死亡白屏经常是因为缺失了JavaScript文件,这就中断了Angular初始化app的过程,从而不能加载我们的视图模板,所以显示空白的页面。

不幸的是,导致“死亡白屏”的原因多种多样,不能确切的说明是什么原因,因为在真机或模拟器上没有控制台。

下面,就介绍2种调试的方法:

ionic Live Reload

谈到ionic Live Reload,我想开发过ionic的童鞋都应该知道,当使用ionic serve在浏览器中调试时,改变代码会使页面重新加载,从而极大的方便了我们的调试。

当使用真机或模拟器时,即使用ionic runionic emulate命令时加上–consolelogs参数,即可在终端中输出app的相关信息:

$ ionic run/emulate android/ios --consolelogs

 

$ ionic run android --consolelogs

但是–consolelogs参数不能单独使用,需配合–livereload参数使用,即:

$ ionic run/emulate android/ios --livereload --consolelogs

 

$ ionic run android --livereload --consolelogs

或者使用简写版本:

$ ionic run/emulate android/ios -l -c

 

$ ionic run android -l -c

其中 -l 代表 –livereload-c 代表 –consolelogs

Live Reload option的作用和浏览器调试下的ionic serve作用类似,当调试过程中改变了代码,真机/模拟器上的app会自动更新。但是需要注意的是,对于插件的任何改变都会导致app的重新构建(rebuild)。Live Reload option起作用还有个前提:你的主机和测试设备或模拟器需要处于同一局域网,并且测试设备或模拟器必须支持web sockets

如果测试时,某个依赖模块不存在或者不能被Angular找到,可能的输出如下: 

这里写图片描述

Chrome Developer Tools

谈及Chrome Developer Tools可以说是无人不知了,Chrome不仅有简洁的界面,还有强大的Chrome Developer Tools,调试利器。但是对于ionic app来说,Chrome Developer Tools只能对android真机或android模拟器进行调试。

  1. 首先,使用USB线连接你的主机和android测试机,确保你的测试机已经打开了USB调试并已经允许你的主机对你的android测试机进行调试;
  2. 然后,打开Chrome浏览器,地址栏输入chrome://inspect,回车;
  3. 现在网页中应该能看到你的设备,如果没有看到,可以参照(自备梯子)。这里我使用的是模拟器: 
    这里写图片描述

点击inspect,Chrome会新建一个调试窗口,剩下的就和网页的调试一样了,看一眼Console,可能会看到如下结果: 

这里写图片描述

结语

可以看到,最简单实用的方式是使用Live Reload参数,适用于Android和IOS,如果只是调试Android,那么使用Chrome Developer Tools将是最好的选择。

 

转载于:https://www.cnblogs.com/crazycode2/p/7739871.html

你可能感兴趣的文章
OSChina 五一劳动节乱弹 ——女孩子晚上不要出门,发生了这样的事情
查看>>
Spring--通过注解来配置bean
查看>>
pandas 十分钟入门
查看>>
nginx rewrite
查看>>
前端安全系列(一):如何防止XSS攻击?
查看>>
IK分词器安装
查看>>
查看Linux并发连接数
查看>>
你是谁不重要,关键是你跟谁!
查看>>
CSS中规则@media的用法
查看>>
pychecker:分析你的python代码
查看>>
我的友情链接
查看>>
DNS显性+隐性URL转发原理
查看>>
我的友情链接
查看>>
网易有道 IP地址、手机号码归属地和身份证 查询接口API
查看>>
鼠标停留在GridView某一行时行的颜色改变
查看>>
系列3:WAS Liberty Profile hello mysql jdbc
查看>>
基础知识:python模块的导入
查看>>
Android MVC之我的实现
查看>>
我的友情链接
查看>>
我的友情链接
查看>>