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

Question

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

当用户单击“上一页”按钮时，某些数据未正确加载。按 F12 并调出开发人员控制台向我显示以下警告:

DOM7011: The code on this page disabled back and forward caching. For more information, see: 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 一样运行并切断(或关闭)导致此问题的任何功能？

Answer 1

恶心。回到老派的 Debug模式。

如果不将整个浏览器放入 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)，那么实际读取这些日志将是一个问题。解决方案是将页面放入框架中并将内容写入同级框架中。只要两个框架在同一域上运行，将数据推送到同级框架中就不会有问题。如果您不能将它们放在同一个域中，那么您就完蛋了。