# internet explorer – Why does JavaScript only work after opening developer tools in IE once?

## The Question :

647 people think this question is useful

IE9 Bug – JavaScript only works after opening developer tools once.

You can see for yourself in this example.

The download pass is “makeuseof”. In any other browser, it works fine. In IE, both buttons do nothing.

The most curious thing I’ve found is that if you open and close the developer toolbar with F12, it all suddenly starts to work.

We’ve tried compatibility mode and such, nothing makes a difference.

How do I make this work in Internet Explorer?

• use cross-browser wrapper: github.com/MichaelZelensky/log.js
• A good alternative, if you have a build step, is to use something like gulp-strip-debug. It removes all console.* methods, great for production builds, or testing in IE.
• For future googlers: I had the same symptoms, but in IE11. Well, it turned out that the answer was not related to console, but to my use of angular and caching of get requests. See answers here and here for more.
• @ChristofferLette Yes, i have the same issue please check stackoverflow.com/questions/31428126/… code works properly when developers tools is opened..
• The most annoying thing about problems like this? They’re almost impossible to debug because it starts working as soon as you open the developer console.

820 people think this answer is useful

It sounds like you might have some debugging code in your javascript.

The experience you’re describing is typical of code which contain console.log() or any of the other console functionality.

The console object is only activated when the Dev Toolbar is opened. Prior to that, calling the console object will result in it being reported as undefined. After the toolbar has been opened, the console will exist (even if the toolbar is subsequently closed), so your console calls will then work.

There are a few solutions to this:

The most obvious one is to go through your code removing references to console. You shouldn’t be leaving stuff like that in production code anyway.

If you want to keep the console references, you could wrap them in an if() statement, or some other conditional which checks whether the console object exists before trying to call it.

163 people think this answer is useful

HTML5 Boilerplate has a nice pre-made code for console problems fixing:

// Avoid console errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});

while (length--) {
method = methods[length];

// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());



153 people think this answer is useful

Here’s another possible reason besides the console.log issue (at least in IE11):

When the console is not open, IE does pretty aggressive caching, so make sure that any $.ajax calls or XMLHttpRequest calls have caching set to false. For example: $.ajax({cache: false, ...})



When the developer console is open, caching is less aggressive. Seems to be a bug (or maybe a feature?)

63 people think this answer is useful

This solved my problem after I made a minor change to it. I added the following in my html page in order to fix the IE9 problem:

<script type="text/javascript">
// IE9 fix
if(!window.console) {
var console = {
log : function(){},
warn : function(){},
error : function(){},
time : function(){},
timeEnd : function(){}
}
}
</script>



29 people think this answer is useful

Besides the ‘console‘ usage issue mentioned in accepted answer and others,there is at least another reason why sometimes pages in Internet Explorer work only with the developer tools activated.

When Developer Tools is enabled, IE doesn’t really uses its HTTP cache (at least by default in IE 11) like it does in normal mode.

It means if your site or page has a caching problem (if it caches more than it should for example – that was my case), you will not see that problem in F12 mode. So if the javascript does some cached AJAX requests, they may not work as expected in normal mode, and work fine in F12 mode.

17 people think this answer is useful

I guess this could help, adding this before any tag of javascript:

try{
console
}catch(e){
console={}; console.log = function(){};
}



8 people think this answer is useful

If you are using AngularJS version 1.X you could use the $log service instead of using console.log directly. Simple service for logging. Default implementation safely writes the message into the browser’s console (if present). https://docs.angularjs.org/api/ng/service/$log

So if you have something similar to

angular.module('logExample', [])
.controller('LogController', ['$scope', function($scope) {
console.log('Hello World!');
}]);



you can replace it with

angular.module('logExample', [])
.controller('LogController', ['$scope', '$log', function($scope,$log) {
$log.log('Hello World!'); }]);  Angular 2+ does not have any built-in log service. ## The Answer 8 5 people think this answer is useful If you are using angular and ie 9, 10 or edge use : myModule.config(['$httpProvider', function($httpProvider) { //initialize get if not there if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {}; } // Answer edited to include suggestions from comments // because previous version of code introduced browser-related errors //disable IE ajax request caching$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);



To completely disable cache.