What does status=canceled for a resource mean in Chrome Developer Tools?

We fought a similar problem where Chrome was canceling requests to load things within frames or iframes, but only intermittently and it seemed dependent on the computer and/or the speed of the internet connection.

This information is a few months out of date, but I built Chromium from scratch, dug through the source to find all the places where requests could get cancelled, and slapped breakpoints on all of them to debug. From memory, the only places where Chrome will cancel a request:

• The DOM element that caused the request to be made got deleted (i.e. an IMG is being loaded, but before the load happened, you deleted the IMG node)
• You did something that made loading the data unnecessary. (i.e. you started loading a iframe, then changed the src or overwrite the contents)
• There are lots of requests going to the same server, and a network problem on earlier requests showed that subsequent requests weren't going to work (DNS lookup error, earlier (same) request resulted e.g. HTTP 400 error code, etc)

In our case we finally traced it down to one frame trying to append HTML to another frame, that sometimes happened before the destination frame even loaded. Once you touch the contents of an iframe, it can no longer load the resource into it (how would it know where to put it?) so it cancels the request.

status=canceled may happen also on ajax requests on JavaScript events:

<script>  $("#call_ajax").on("click", function(event){     $.ajax({        ...         });  });</script><button id="call_ajax">call</button> 

The event successfully sends the request, but is is canceled then (but processed by the server). The reason is, the elements submit forms on click events, no matter if you make any ajax requests on the same click event.

To prevent request from being cancelled, JavaScript event.preventDefault(); have to be called:

<script>  $("#call_ajax").on("click", function(event){     event.preventDefault();     $.ajax({        ...         });  });</script>

NB: Make sure you don't have any wrapping form elements.

I had a similar issue where my button with onclick={} was wrapped in a form element. When clicking the button the form is also submitted, and that messed it all up...

This answer will probably never be read by anyone, but I figured why not write it :)