Why does JavaScript only work after opening developer tools in IE once?
Solution 1
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.
Solution 2
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;
}
}
}());
As @plus- pointed in comments, latest version is available on their GitHub page
Solution 3
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?)
Solution 4
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>
Solution 5
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.
James Bruce
Updated on July 08, 2022Comments
-
James Bruce almost 2 years
IE9 Bug - JavaScript only works after opening developer tools once.
Our site offers free pdf downloads to users, and it has a simple "enter password to download" function. However, it doesn't work at all in Internet Explorer.
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?
-
Meekohi about 12 yearsAre there any workarounds for leaving debugging code in? IE is the only browser with this inane behavior...
-
Meekohi about 12 years
if(!console) {console={}; console.log = function(){};}
-
mindplay.dk almost 12 years@Meekohi
if(!console)
will cause the same error - it should readif(!window.console)
-
Spudley about 11 years@btevfik - I'm glad the answer helped you, but it's a little unfair to knock IE for this. IE works this way for backward compatibility reasons -- older IE versions did not have the console feature, and some third party scripts exist that replicate it (eg Firebug Lite). Having the console object declared by default would have broken those scripts, which would have been unpopular with developers that wanted to use them. IE's behaviour of creating the console object when the dev tools window is opened is a good compromise to this.
-
Ruan Mendes about 10 years
try catch
to detect that a variable exists is a bad idea. Not only is it slow, but if you have more than one statement in your try block, you could get an exception for a different reason. Don't use this, at the very least useif (typeof console == 'undefined')
-
Michael Ross almost 10 yearsSee stackoverflow.com/questions/3984961/… for how to disable caching xmlHttpReq requests.
-
Admin almost 10 yearsSweet. This surprisingly worked. I guess Angular's $http service does not cache bust as I thought it would.
-
Christoffer Lette over 9 yearsThe link in @plus' comment is no longer valid. The code has been pushed down into a
src
sub-dir: github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js -
Jordan Davis over 9 yearsso... IE should didn't implement a feature that every new js dev uses all the time, to avoid annoying a few devs that used a script to fix the thing that should have worked in the first place... but it's unfair to knock IE for that? You are a very generous person Spudley!!! :)
-
Spudley over 9 years@jorjordandan - well, you can't really knock old IE for it; you'd have the same issue if you were trying to debug using an old version of Firefox. It's just that nobody uses Firefox 3 any more.
-
Chnoch about 9 yearsThis just saved me ;) Thanks! I'd say it's a bug since you should have the same conditions to test and debug your website with the console open and close.
-
antoine129 about 9 years
console = window.console || { log: function(){} }
-
regeter about 9 years
if(!window.console) {console={}; console.log = function(){};}
My god, this just fixed this annoying issue with my code not working on IE8&9 when the user directly opened my site as the start site. It seems on IE10 and 11 this isn't an issue anymore. -
daf over 8 yearsCame here from google via a search for: "ie problem goes away when opening dev tools f12" This has solved a problem which I couldn't reproduce on any version of IE I had, but which was cropping up at the client. It's also impossible to debug, because opening dev tools to find out what's going on causes the problem to go away. Thanks so much; I wish I could up this by more than one.
-
Ziul over 8 years@Spudley the funny thing is, chrome was the first one to release the console and they didn't do anything crazy like this for "backward compatibility", yet IE8 came with this weird behavior. Then firefox 4 added the cosole too and still nothing crazy, and IE9 still had this weird console behaviour: caniuse.com/#search=console
-
Spudley over 8 years@Ziul - actually, the original console that they all copy from is the Firebug plugin for Firefox, which was available way back for Firefox 1.5, (possibly even earlier?) a long time before Chrome was released. Back when Firebug came out it had exactly this behaviour, so IE's behaviour is not out of context for the time. Yes, it seems bad now, but it wasn't at the time. (and anyway, if you aren't prepared for bad browser behaviour, you shouldn't be working in old IE versions anyway, right?)
-
Ziul over 8 years@Spudley It wasn't like this in the IE8 beta, they just gave us a big surprice when they released it like this...
-
HaBo about 8 yearsI have same problem in Safari 9.x (earlier versions works fine). but none of these solutions worked for me
-
DannykPowell almost 8 yearsthis helped me, thanks- for anyone else using typescript, this is the "ILogService" in the angular definitions
-
Michael over 7 yearsStill happens with IE11
-
user1062589 over 7 yearsWorked for me. Specifically: stackoverflow.com/questions/13391563/…
-
Vikram almost 7 yearsThis solution does not work on IE 11 on Windows 7 64-bit.
-
Migs over 6 yearsthis should be higher as I think is the actual answer... the accepted answer in regards to console.log in some IE version will throw an error, not caused the behavior described here.
-
JesseDahl about 6 yearsIIRC using $log causes the location of the log statement to be obscured, unlike when using console.log. Not so great from my experience during development.
-
zonyang about 5 yearsThis solved my problem on IE 11 on Windows 7 64-bit.
-
CrazyPenguin over 3 yearsIt's since been removed from the HTML5 Boilerplate repo. The last version was this one