如何在 IE 中调试 "Back Navigation Caching"？

Question

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

当用户单击他们的 "Previous" 按钮时，某些数据未正确加载。按 F12 并调出开发人员控制台向我显示了以下警告：

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337

好的，所以我转到提供的 link，我注意到文档说明：

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

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

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

Answer 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);
})()

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

如果您正在进行实际的页面导航（而不只是将 URL 更改为 pushState()），那么实际读取这些日志将是一个问题。解决方案是将页面放在一个框架中，然后将内容写到兄弟框架中。只要两个框架都在同一个域上运行，将数据推入同级框架就没有问题。如果你不能将它们放在同一个域中，那你就完蛋了。

如何在 IE 中调试 "Back Navigation Caching"？

How can I debug "Back Navigation Caching" in IE?

javascript

caching

google-chrome

internet-explorer-11