Why does JavaScript only work after opening developer tools in IE once

Question

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

User · Answer

I put the resolution and fix for my issue . Looks like AJAX request that I put inside my JavaScript was not processing because my page was having some cache problem. if your site or page has a caching problem you will not see that problem in developers/F12 mode. my cached JavaScript AJAX requests it may not work as expected and cause the execution to break which F12 has no problem at all. So just added new parameter to make cache false.

$.ajax({
  cache: false,
});

Looks like IE specifically needs this to be false so that the AJAX and javascript activity run well.

User · Answer

It happened in IE 11 for me  And I was calling the jquery  load function  So I did it the old fashion way and put something in the url to disable cacheing       divToReplaceHtml   load   Url Action  Action    Controller        Model ID     nocache     new Date   getTime

User · Answer

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

User · Answer

I guess this could help  adding this before any tag of javascript   try    console  catch e      console     console log   function

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt script type  text javascript  gt         IE9 fix     if  window console            var console                 log   function                  warn   function                  error   function                  time   function                  timeEnd   function                      lt  script gt

User · Answer

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

User · Answer

I got yet another alternative for the solutions offered by runeks and todotresde that also avoids the pitfalls discussed in the comments to Spudley s answer           try               console log message             catch  e                It s a bit scruffy but on the other hand it s concise and covers all the logging methods covered in runeks  answer and it has the huge advantage that you can open the console window of IE at any time and the logs come flowing in

User · Answer

We ran into this problem on IE 11 on Windows 7 and Windows 10  We discovered what exactly the problem was by turning on debugging capabilities for IE  IE   Internet Options   Advanced tab   Browsing   Uncheck Disable script debugging  Internet Explorer    This feature is typically checked on within our environment by the domain admins   The problem was because we were using the console debug      method within our JavaScript code  The assumption made by the developer  me  was I did not want anything written if the client Developer Tools console was not explicitly open  While Chrome and Firefox seemed to agree with this strategy  IE 11 did not like it one bit  By changing all the console debug      statements to console log      statements  we were able to continue to log additional information in the client console and view it when it was open  but otherwise keep it hidden from the typical user

User · Answer

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

[javascript] Why does JavaScript only work after opening developer tools in IE once?

Examples related to javascript

Examples related to internet-explorer

Examples related to internet-explorer-9