如何找出导致我的白屏死机的原因？答案

【问题标题】：How to find out what is causing my white screen of death?如何找出导致我的白屏死机的原因？
【发布时间】：2017-03-24 12:05:36
【问题描述】：

我有一个 Ionic 应用程序。它工作了几个星期，然后就停止了。我得到启动画面，然后是白屏死机。当我在应用程序中使用 chrome://inspect 进行调试时，我在控制台中收到以下消息：

未找到 Content-Security-Policy 元标记。使用时请加一 cordova-plugin-whitelist 插件。

如果我清除了我的应用程序上的所有数据，它就会开始工作，并且当我在另一台设备上调试正在工作的应用程序时，我会收到相同的消息，所以我认为不是插件有问题。但是，我已经使用该插件来探索白屏问题，因为如果我将以下内容添加到我的index.html（防止从任何来源加载资源的内容安全策略），我可以获得白屏死机：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'">

当我这样做时，我会在控制台中收到类似这样的错误消息：

拒绝加载样式表 'file:///android_asset/www/lib/ionic/css/ionic.min.css' 因为它违反以下内容安全策略指令：“default-src 'none'"。请注意，'style-src' 没有明确设置，所以 'default-src' 用作后备

当我把标签改成这样的时候：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

我在控制台中得到了这个：

拒绝应用内联样式，因为它违反了..etc

我也得到了

EvalError：拒绝将字符串评估为 JavaScript，因为 'unsafe-eval' 不是允许的脚本来源...等"

但是现在，我的异常处理程序不是白屏，而是捕获并报告问题。

据此，我推断缺少文件会导致我的白屏，因为如果加载了所有文件，我的异常处理程序就会工作。

我可以使用此安全策略消除控制台中的所有错误：

<meta http-equiv="Content-Security-Policy" 
          content="style-src 'self' ionic.bundle.min.js 'unsafe-inline';
                   script-src 'self' console-via-logger.js 'unsafe-eval';
                   img-src 'self' ionic.bundle.min.js data:">

所以我想知道是否有一种方法可以在早期阶段捕获我的应用程序中的异常，以便我可以诊断最初的白屏问题？我认为它一定是数据中的某些东西阻止了文件被加载，但这怎么可能呢？

【问题讨论】：

你检查过stackoverflow.com/questions/30212306/…中提到的解决方案
是的。我知道我应该添加一个 CSP 以使控制台错误消失，但我不需要过滤任何导航，因为我只导航到默认的 file:// URL。我真正想知道的是，是否有一种方法可以在早期阶段捕获我的应用程序中的异常，以便我可以诊断我的问题 - 我可以使用 CSP 进行模拟
您遇到的错误可能与 CSP 无关——仅仅因为您可以使用 CSP 模拟它并不意味着它与您遇到的故障相同。我的猜测是您遇到了阻碍应用程序启动的 JavaScript 错误。您可以附加一个全局处理程序，如window.onerror=function(...)，它会在发生错误时生成警报。或者，如果您连接了调试器，请尝试 window.location.reload() 触发您的应用重新启动并查看记录到控制台的内容。
你可以使用旧的logcat，通过android监视器（可以通过点击android sdk工具目录中的监视器windows批处理文件打开）来浏览日志
@KerriShotts 我已采纳您的建议并将其写在答案中

标签： cordova ionic-framework

【解决方案1】：

为了测试 Kerri Shotts 理论，即 JavaScript 错误阻碍了应用启动，我在 app.js 文件中添加了 throw：

(function () {
    'use strict';

    throw ('test');

    //setting up the dependencies
    var app = angular.module('app', [..etc..]
    ]);

})();

果然——白屏死机

接下来我将 window.onerror 脚本添加到我的 index.html：

<body data-ng-app="app">
    <script>
        (function () {
            window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
                alert('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber
                + ' Column: ' + column + ' StackTrace: ' + errorObj);
            }
        }());
    </script>
    ....etc

我必须将 'unsafe-inline' 添加到内容安全策略中才能运行该脚本，但是一旦我这样做了，我就会收到带有错误消息的警报，而不仅仅是白屏。

我的 CSP：

<meta http-equiv="Content-Security-Policy"
          content="style-src 'self' ionic.bundle.min.js 'unsafe-inline';
                   script-src 'self' console-via-logger.js 'unsafe-eval' 'unsafe-inline';
                   img-src 'self' ionic.bundle.min.js data:">

【讨论】：