Site Behaves Differently When Developer Tools Are Open Ie11

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

Solution 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.

Solution 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.

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

Solution 4:

As pointed out already it's because IE11 + Edge<=16 is so stupid that it doesn't support consoleunless 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 () {
  returnthis;
};
console.log = typeof console.log === 'function' || function () {
  returnthis;
};
console.info = typeof console.info === 'function' || function () {
  returnthis;
};
console.error = typeof console.error === 'function' || function () {
  returnthis;
};
console.assert = typeof console.assert === 'function' || function () {
  returnthis;
};
console.dir = typeof console.dir === 'function' || function () {
  returnthis;
};
console.table = typeof console.table === 'function' || function () {
  returnthis;
};
console.group = typeof console.group === 'function' || function () {
  returnthis;
};
console.groupEnd = typeof console.groupEnd === 'function' || function () {
  returnthis;
};
console.time = typeof console.time === 'function' || function () {
  returnthis;
};
console.timeEnd = typeof console.timeEnd === 'function' || function () {
  returnthis;
};
console.timeLog = typeof console.timeLog === 'function' || function () {
  returnthis;
};
console.trace = typeof console.trace === 'function' || function () {
  returnthis;
};
console.clear = typeof console.clear === 'function' || function () {
  returnthis;
};
console.count = typeof console.count === 'function' || function () {
  returnthis;
};
console.debug = typeof console.debug === 'function' || function () {
  returnthis;
};
console.dirxml = typeof console.dirxml === 'function' || function () {
  returnthis;
};
console.groupCollapsed = typeof console.groupCollapsed === 'function' || function () {
  returnthis;
};

Solution 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.