当开发人员工具打开IE11时，网站的行为会有所不同

Question

我在IE11中使用以下模板，无法弄清楚为什么每次导航发生时侧边栏都会唱歌。当开发人员工具打开时，它的行为就像我希望的那样。通过在运行IE11时单击树中UI元素下的任何一个选项卡，可以轻松演示它。但是，您会注意到如果F12开发人员工具打开，每次导航发生时侧栏都不会滑动。这不是chrome中的问题。 fastclick有一个错误，可能会显示但是我没有快速点击而且仍然会发生。任何帮助都会很棒。谢谢。 https://almsaeedstudio.com/themes/AdminLTE/pages/UI/general.html

Answer 1

尝试从代码中删除任何console.log()。

console.log()这是帮助调试Javascript时可以导致IE完全停止处理页面上的脚本。为了增加这个谜团，如果你继续在开放式开发工具的IE中观看你的页面 - 你根本不会注意到一个问题。

<强>解释

原因是除非在IE中打开devtools，否则不会实例化控制台对象。否则，您将看到两件事之一：

1. Javascript无法正确执行
2. 控制台存在神秘错误，例如“对象未定义”或其他性质错误

十分之九，你的代码中有一个错误的console.log。这不会影响IE以外的任何浏览器。

Answer 2

另一个可能的原因，特别是在执行ajax调用时，可能会在dev工具关闭时缓存ajax响应，但在dev工具打开时会从服务器刷新。

在IE中，打开开发人员工具的网络标签，点击播放图标，然后取消设置始终从服务器刷新按钮。然后观察您的任何ajax调用是否返回，响应代码为304（未修改）。如果是，那么您没有从服务器获取新数据，您需要更新通过ajax调用的页面上的可缓存性设置。

Answer 3

我假设你已经修好了，因为你发布了它，因为我看不到你在链接中描述的行为。

但是，我最近遇到了一个类似的问题，开放的开发工具改变了行为而不是因为控制台问题，而是因为打开工具改变了窗口的 width 。在我的情况下，窗口宽度差异触发了潜在的错误。

相关帖子here。

Answer 4

在已经很不错的答案上添加（因为我无法发表评论-需要50个代表点），同意@ sam100rav的回答和@storsoc的评论，我发现在IE11版本11.1387.15063.0中已更新版本11.0.90（KB4462949）中，window.console实际上作为空对象（window.console = {}）存在。因此，我使用了@storsoc的polyfill的变体，如下所示。

if (!window.console || Object.keys(window.console).length === 0) {
  window.console = {
    log: function() {},
    info: function() {},
    error: function() {},
    warn: function() {}
  };
}

Answer 5

您可以在开发者控制台中将兼容模式设置为更高版本的IE（请参阅突出显示的部分）

Answer 6

正如已经指出的那样，这是因为IE11 + Edge <= 16太愚蠢以至于它不支持console 除非开发人员工具已打开...因此，如果您将其打开以禁用缓存，您将不会看到任何问题，并且您可能会认为该问题仅是由于浏览器缓存所致...但不是。.：：

我为此创建了这个“ polyfill”（不是真正的polyfill，但是使IE不会引发任何错误）。尽可能早地将其添加到您的网站上，因为任何js都可能使用console.log或console.warn等。

window.console = typeof window.console !== 'object' || {};
console.warn = typeof console.warn === 'function' || function () {
  return this;
};
console.log = typeof console.log === 'function' || function () {
  return this;
};
console.info = typeof console.info === 'function' || function () {
  return this;
};
console.error = typeof console.error === 'function' || function () {
  return this;
};
console.assert = typeof console.assert === 'function' || function () {
  return this;
};
console.dir = typeof console.dir === 'function' || function () {
  return this;
};
console.table = typeof console.table === 'function' || function () {
  return this;
};
console.group = typeof console.group === 'function' || function () {
  return this;
};
console.groupEnd = typeof console.groupEnd === 'function' || function () {
  return this;
};
console.time = typeof console.time === 'function' || function () {
  return this;
};
console.timeEnd = typeof console.timeEnd === 'function' || function () {
  return this;
};
console.timeLog = typeof console.timeLog === 'function' || function () {
  return this;
};
console.trace = typeof console.trace === 'function' || function () {
  return this;
};
console.clear = typeof console.clear === 'function' || function () {
  return this;
};
console.count = typeof console.count === 'function' || function () {
  return this;
};
console.debug = typeof console.debug === 'function' || function () {
  return this;
};
console.dirxml = typeof console.dirxml === 'function' || function () {
  return this;
};
console.groupCollapsed = typeof console.groupCollapsed === 'function' || function () {
  return this;
};