Site behaves differently when developer tools are open IE11

Question

Im using the following template in IE11 and can not figure out why the sidebar sings in every time navigation is happening. When developer tools are open it behaves as I would like it to. It is easily demoed by clicking on any one of the tabs under UI element in the tree while running IE11. However you will notice if F12 developer tools are open the side bar does not slide in every time navigation happens. This is not an issue in chrome. There is an error with fastclick that may show up however I have ran without fastclick and it still happens. Any help would be great. Thanks. https://almsaeedstudio.com/themes/AdminLTE/pages/UI/general.html

Answer 1

Adding onto the already great answers (since I can't comment - requires 50 rep points), agreeing with the answer from @sam100rav and the comment from @storsoc, I discovered that in IE11 version 11.1387.15063.0 with updated version 11.0.90 (KB4462949), that window.console indeed exists as an empty object (window.console = {}). Hence, I used a variation of the polyfill from @storsoc as shown below.

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

Answer 2

As pointed out already it's because IE11 + Edge<=16 is so stupid that it doesn't support console unless developer tools is opened... So if you open that to disable caching you won't see any issues and you might think that the issue was just due to browser cache... but nope.. :@

I made this "polyfill" for it (doesn't really polyfill, but makes IE not throw any errors). Add it as early as possible on your site as any js might be using console.log or console.warn etc.

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;
};

Answer 3

Try removing any console.log() from your code.

console.log() which is to help out when debugging Javascript can cause IE to completely stop processing scripts on the page. To add to the mystery, if you keep watching your page in IE with devtools open - you won’t notice an issue at all.

Explanation

The reason for this is the console object is not instantiated unless devtools is open in IE. Otherwise, you will see one of two things:

1. Javascript won’t execute correctly
2. Console has cryptic errors, such as ‘object is undefined’ or others of that nature

Nine times out of ten, you have an errant console.log in the code somewhere. This does not affect any browser other than IE.

Answer 4

Another potential cause, especially if you are performing ajax calls, is the ajax response may be cached when dev tools are closed, but refreshed from the server when dev tools are open.

In IE, open the Network tab of Developer Tools, click the play icon, and un-set the Always refresh from server button. Then watch to see if any of your ajax calls are coming back with a response code of 304 (Not modified). If they are, then you are not getting fresh data from the server and you need to update the cacheability settings on the page that is being called via ajax.