如何在 IE 中调试“后退导航缓存”？答案

【问题标题】：How can I debug "Back Navigation Caching" in IE?如何在 IE 中调试“后退导航缓存”？
【发布时间】：2016-02-04 14:01:47
【问题描述】：

我在 IE 中看到了一个在 Chrome 中没有看到的奇怪错误。具体来说，这涉及到一些 JS 代码在 (Telerik) 向导导航回它的第一步时没有触发。

当用户单击“上一个”按钮时，某些数据没有正确加载。按 F12 并调出开发者控制台向我显示以下警告：

DOM7011：此页面上的代码禁用了前后缓存。更多信息请见：http://go.microsoft.com/fwlink/?LinkID=291337

好的，所以我转到提供的链接，我注意到文档状态：

In order to be cached, webpages must meet these conditions:
...
 - The F12 Developer tools window isn't open

这是一个问题，因为当我在开发窗口打开时使用向导中的导航按钮时，它的行为正常，就像在 Chrome 中一样。

如何调试相关的 Javascript，以便弄清楚发生了什么？此外，我了解缓存是什么，但我不确定这是什么意思，我不知道为什么 Chrome 的行为会有所不同。有没有一种方法可以强制 IE 表现得像 chrome 并关闭（或关闭）导致此问题的任何功能？

【问题讨论】：

标签： javascript google-chrome caching internet-explorer-11

【解决方案1】：

哎呀。为您返校调试。

没有将整个浏览器放入 Windows 调试器，您几乎可以忘记设置断点。你所能做的就是登录。

如果您很幸运并且您的问题不是太深，您可以使用一些简单的alert() 语句来让您了解代码中各个阶段的事物状态。一件好事是您现在可以很好地序列化对象；例如，您可以使用JSON.stringify(this)，这可能会给您一个巨大的输出，您可以将其复制并粘贴到您的 IDE 中并解压缩。这样做的一个主要好处是警报将被阻止，因此您可以花时间研究输出。这样做的一个主要缺点是现在更有可能出现竞争条件。

或者，您可以将<textarea> 添加到页面并将JSON.stringify(this) 结果放入其中。因为这意味着额外的 DOM 突变，它也增加了竞争条件的几率，但幅度不大。（如果可能出现竞争条件，您可以这样做：

(function () {
    var currentState = JSON.stringify(this);
    setTimeout(function () {
        document.querySelector('textarea').value = currentState;
    }, 1000);
})()

即使这些现在是异步的，如果您按顺序多次使用它，它们将按相同的顺序执行（除非您更改超时期限）。

如果您正在执行实际的页面导航（而不仅仅是使用 pushState() 更改 URL），那么实际阅读这些日志将是一个问题。解决方案是将页面放在一个框架中并将内容写入同级框架。只要两个框架都在同一个域上运行，您就可以将数据推送到同级框架中。如果你不能把它们放在同一个域上，那你就完蛋了。

【讨论】：

alerts + JSON.stringify() 帮助我得到了我需要的东西。谢谢。