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

Stevenson

Answer 1

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.

Apanage

all calls to console are commented out, twice checked now and still no go – Stevenson

@Stevenson just out of the curiosity, did you figure out what's the root cause? – Electromagnetic

That was precisely what we were running into on an intranet site that had to run in Compatibility View mode: any console.log() call would just quietly halt all JavaScript. Instead of commenting out console.log() calls we just polyfilled a stub so that others browsers (or IE with console open) would still provide diagnostic value: if (!window.console) { window.console = {}; window.console.log = function () { } }; – Kauffman

Answer 2

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.

Gavrah

This helped me thanks! The site was working with Developer Tools. Thanks! – Blende

Answer 3

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

Frostbite

Answer 4

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

Inhaler

Answer 5

I'm assuming you've fixed this since you posted it as I can not see the behavior you describe in your link.

However, I have recently run into a similar issue where the dev tools being open changed the behavior not because of console issues, but because opening the tools changed the width of the window. It was the window width difference that triggered an underlying bug in my case.

Related post here.

Ibbie

Answer 6

It's possible you've got the compatibility mode set to a later version of IE in your developer console (see the highlighted section)

Hudak