Cancel ajax request from chrome developer tools

Question

I want to cancel the ajax request from chrome developer tools after it has initiated. For example I want to test my fallback message is showing correctly. I can set No throttling to Offline so that all calls will fail, but I just want to test one API to fail, for debugging purposes.

I know I can use abort() methods, (ie I can do it through JavaScript). I dont want to touch the code for just this need.

There's a replay XHR option in right click of the API, It'll be great there is something like abort XHR in same way. But there isn't.

Answer 1

From Chrome 59 you can block specific requests from Network tab of developer tools itself.

https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests

Right-click on the request in the Network panel and select Block Request URL. A new Request blocking tab pops up in the Drawer, which lets you manage blocked requests.

So, In my case, I will run the code block that specific API and then re-run. :)

As per the comment, this is not exactly canceling the already started request, but checking how the app behaves if only one request is failed by blocking only one request. Thanks @Ross Ivantsiv for this.

Answer 2

There is a simple trick I use. Pressing F5 while in the tab immediately followed by ESC.

XHR requests still active by chrome are canceled before the new answer is loaded.