JavaScript console log causes error Synchronous XMLHttpRequest on the main thread is deprecated

Question

I have been adding logs to the console to check the status of different variables without using the Firefox debugger    However  in many places in which I add a console log in my main js file  I receive the following error instead of my lovely little handwritten messages to myself       Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user s experience  For more help http   xhr spec whatwg org    What alternatives to or wrappers for console log can I add to my code use that will not cause this error    Am I  doing it wrong

User · Answer

The warning message MAY BE due to an XMLHttpRequest request within the main thread with the async flag set to false.

https://xhr.spec.whatwg.org/#synchronous-flag:

Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs.

The future direction is to only allow XMLHttpRequests in worker threads. The message is intended to be a warning to that effect.

User · Answer

To avoid this warning  do not use   async  false   in any of your   ajax   calls  This is the only feature of XMLHttpRequest that s deprecated   The default is   async  true   jQuery has deprecated synchronous XMLHTTPRequest

User · Answer

I fixed this with below steps    Check your CDN scripts and add them locally  Move your scripts includes into the header section

User · Answer

For me  the problem was that in an OK request  I expected the ajax response to be a well formatted HTML string such as a table  but in this case  the server was experiencing a problem with the request  redirecting to an error page  and was therefore returning back the HTML code of the error page  which had a  lt script tag somewhere  I console logged the ajax response and that s when I realized it was not what I was expecting  then proceeded to do my debugging

User · Answer

This happened to me when I was being lazy and included a script tag as part of the content that was being returned  As such   Partial HTML Content    lt div gt    SOME CONTENT HERE  lt  div gt   lt script src   scripts script js  gt  lt  script gt     It appears  at least in my case  that if you return HTML content like that via xhr  you will cause jQuery to make a call to get that script  That call happens with an async flag false since it assumes you need the script to continue loading    In situations like this one you d be better served by looking into a binding framework of some kind and just returning a JSON object  or depending on your backend and templating you could change how you load your scripts    You could also use jQuery s getScript   to grab relevant scripts  Here is a fiddle  It s just a straight copy of the jQuery example  but I m not seeing any warnings thrown when scripts are loaded that way   Example   lt script gt  var url     scripts script js     getScript url    lt  script gt    http   jsfiddle net 49tkL0qd

User · Answer

In a MVC application  I got this warning because I was opening a Kendo Window with a method that was returning a View    instead of a PartialView    The View   was trying to retrive again all the scripts of the page

User · Answer

I was also facing same issue but able to fix it by putting async  true  I know it is by default true but it works when I write it explicitly    ajax      async  true       this will solve the problem    type   POST      url    Page Method      contentType   application json      data  JSON stringify   ParameterName  paramValue

User · Answer

I got this exception when I set url in query like  example com files text txt   Ive changed url to  http   example com files text txt  and this exception dissapeared

User · Answer

The question raised in 2014 and it s 2019 so I guess it s good to look for better option   You can simply use fetch api in Javascript which provide you more flexibility   for example  see this code  fetch    api some json        then  response    gt            response json   then  data    gt                                              catch  err    gt

User · Answer

In my case this was caused by the flexie script which was part of the  CDNJS Selections  app offered by Cloudflare   According to Cloudflare  This app is being deprecated in March 2015   I turned it off and the message disappeared instantly   You can access the apps by visiting https   www cloudflare com a cloudflare-apps yourdomain com  NB  this is a copy of my answer on this thread Synchronous XMLHttpRequest warning and  lt script gt   I visited both when looking for a solution

User · Answer

In Chrome  press F12 Develomping tools-  press F1  See settings- general- Apperance   Don t show chrome Data Saver warning - set this checkbox  See settings- general- Console   Log XMLHTTPRequest  - set this checkbox too    Enjoy

User · Answer

Sometimes it s necessary to ajax load a script but delay document ready until after the script is loaded   jQuery supports this with the holdReady   function   Example usage     holdReady true                                  set hold function releaseHold       holdReady false        callback to release hold   getScript  script js   releaseHold              load script then release hold   The actual script loading is asynchronous  no error   but the effect is synchronous if the rest of your JavaScript runs after document ready      This advanced feature would typically be used by dynamic script   loaders that want to load additional JavaScript such as jQuery plugins   before allowing the ready event to occur  even though the DOM may be   ready    Documentation       https   api jquery com jquery holdready     UPDATE January 7  2019  From JQMIGRATE      jQuery holdReady   is deprecated      Cause  The jQuery holdReady   method has been deprecated due to its detrimental effect on the global performance of the page  This method can prevent all the code on the page from initializing for extended lengths of time       Solution  Rewrite the page so that it does not require all jQuery ready handlers to be delayed  This might be accomplished  for example  by late-loading only the code that requires the delay when it is safe to run  Due to the complexity of this method  jQuery Migrate does not attempt to fill the functionality  If the underlying version of jQuery used with jQuery Migrate no longer contains jQuery holdReady   the code will fail shortly after this warning appears

User · Answer

This is solved in my case      JS     ajaxPrefilter function  options  original Options  jqXHR         options async   true        This answer was inserted in this link  https   stackoverflow com questions 28322636 synchronous-xmlhttprequest-warning-and-script

User · Answer

Visual Studio 2015 2017 s live debugger is injecting code that contains the deprecated call

User · Answer

I have been looking at the answers all impressive  I think He should provide the code that is giving him a problem  Given the example below  If you have a script to link to jquery in page php then you get that notice        ready function            ajax  url   page php           type   GET           success  function  result                page   html result

User · Answer

I get such warning in following case   1  file1 which contains  lt script type  text javascript  src   javascript jquery-1 10 2 js  gt  lt  script gt   Page has input fields  I enter some value in input field and click button  Jquery sends input to external php file   2  external php file also contains jquery and in the external php file i also included  lt script type  text javascript  src   javascript jquery-1 10 2 js  gt  lt  script gt   Because if this i got the warning    Removed  lt script type  text javascript  src   javascript jquery-1 10 2 js  gt  lt  script gt  from external php file and works without the warning   As i understand on loading the first file  file1   i load jquery-1 10 2 js and as the page does not reloads  it sends data to external php file using jquery   post   then jquery-1 10 2 js continue to exist  So not necessary again to load it

User · Answer

And I got this exception for including one can js script inside another  e g       gt anotherScript

User · Answer

In my particular case I was rendering a Rails partial without render layout  false which was re-rendering the entire layout  including all of the scripts in the  lt head gt  tag   Adding render layout  false to the controller action fixed the problem

User · Answer

It was happening to me in ZF2  I was trying to load the Modal content but I forgot to disable the layout before   So    viewModel   new ViewModel     viewModel- gt setTerminal true   return  viewModel

User · Answer

Like  Nycen I also got this error because of a link to Cloudfare   Mine was for the Select2 plugin   to fix it I just removed   src    cdnjs cloudflare com ajax libs select2 4 0 0 js select2 min js    and the error went away

User · Answer

Webgr partial answer actually helped me debug this warning   console log  shame the other part of that answer brought so many downvotes     Anyway  here is how I found out what was the cause of this warning in my case    Use Chrome Browser   Hit F12 to bring DevTools Open the drawer menu  in Chrome 3 vertical dots in the upper right  Under Console   check Log XMLHttpRequests option Reload your page that was giving you the error and observe what happens on each ajax request in the console log    In my case  another plugin was loading 2  js libraries after each ajax call  that were absolutely not required nor necessary  Disabling the rogue plugin removed the warning from the log  From that point  you can either try to fix the problem yourself  e g  limit the loading of the scripts to certain pages or events - this is way too specific for an answer here  or contact 3rd party plugin developer to solve it   Hope this helps someone

[jquery] JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..."

Examples related to jquery

Examples related to debugging

Examples related to firefox

Examples related to backbone.js

Examples related to console.log