死亡白屏(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将是最好的选择。

ionic 调试 "死亡白屏"的更多相关文章

  1. ionic ios iframe 白屏

    之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常 原因是ios对app打开外部网页有限制需要取消限制 解决方法 1.确认添加whitelist 插件 2.在conf ...

  2. ionic 白屏

    昨天在发布新app的时候发现app在高版本的android的时候发现没有问题,在低版本的android 的时候发现存在白屏的情况,在run中alert,不能弹框,run不能运行, 参考这篇文章  ht ...

  3. 【小贴士】【stringify神BUG】【localstorage失效】【消灭Safari alert框】【是否延迟加载】【页面10px白屏】

    前言 最近碰到几个恶心问题,也发现一点优化技巧,以及对Hybrid知识的一些整理,这里便一并拿出来做分享了,关于Hybrid的调试,会是我今后一个重点 我的博客首先是学习笔记,方便自己做知识沉淀,以后 ...

  4. 解决关于 ionic3 启动白屏 控制台错误提示:Uncaught SyntaxError Use of const in strict mode.

    今天将项目从ionic2 升级为ionic3 ,ionic serve 运行在网页上无任何错误. 但是将项目打包成为android apk 却一直卡在启动页面 白屏,进不去的情况.后来在android ...

  5. ionic2 关于启动后白屏问题跟app启动慢的问题

    问题描述: 在ionic2下创建的项目打包生成apk,运行在真机上,进入启动页然后有5秒左右的白屏情况才进入首页,在真实项目中更严重,启动画面后更有时候十几秒都是白屏,体验性非常差. 在各种搜索之下, ...

  6. Silverlight网页打开后马上崩溃,“白屏”,而且毫无提示

    如题,出现白屏的问题 在Application_UnhandledException函数内,跟踪异常e的提示信息,可以了解到如下信息: at System.ComponentModel.AsyncCo ...

  7. npm run build 打包后(直接打包白屏),如何运行在本地查看效果(Apache服务)

    转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...

  8. Ionic2使用百度地图API(JS)出现白屏解决方案

    最近自学ionic2,写了一个内嵌百度地图JS的demo,实际跑起来之后出现了大家常见的白屏问题.. 最初的实现是这样的: 首先主页内嵌了一个百度地图插件 <div id="Bmap& ...

  9. ionic2常见问题-启动后白屏问题

    问题描述 app启动后大概有几秒白屏,才会显示首页,如下gif图 启动有白屏.gif 解决方法1 请查看以下3张图的标注 图 1-最初config.xml配置 图 2-更改后的splash配置 图 3 ...

随机推荐

  1. HDU 4614 Vases and Flowers(线段树+二分)

    Vases and Flowers Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others ...

  2. 【最大流】hihocoder 1369 : 网络流一·Ford-Fulkerson算法

    http://hihocoder.com/problemset/problem/1369?sid=1328132 参考 https://blog.csdn.net/a1799342217/articl ...

  3. Normalize.css用法

    1 Normalize.css用法 重置样式非常多,Normalize.css和reset是两个常用的重置 CSS 文件 http://necolas.github.io/normalize.css/ ...

  4. 通过Xode上传代码到GIthub---步骤

    ---恢复内容开始--- 一:打开终端,git命令进行全局配置 由于本人已经配置完成,so,直接查看配置信息 然后在本地创建一个文件夹, 然后在gitHub上创建一个代码库 在终端clone到本地创建 ...

  5. HDOJ 1398 Square Coins

    Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  6. 【POJ3667】Hotel(线段树)

    题意:有n个依次编号的元素,要求维护以下两个操作: 1.询问整个数列中是否有长度>=x的连续的一段未被标记的元素,若无输出0,若有输出最小的开始编号ans并将[ans,ans+x-1]标记 2. ...

  7. HDU 4487 Maximum Random Walk

    Maximum Random Walk Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. LOJ#2084. 「NOI2016」网格

    $n,m \leq 1e9$,$n*m$的网格中有$c \leq 1e5$个是黑的,其他是白的.问:使至少两个白的不连通,最少需要再把几个白的涂黑. 可以发现答案是-1,0,1,2啦.-1要么没白的, ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---15

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  10. JSON Web Token的使用

    定义 JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 适用场景 1.用于向Web应用传递一些非敏感信息.例如完成加好友.下 ...