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

1. If you don't know the exact URL, You can debug all XHR by adding an XHR breakpoint within the Sources tab

2. Or if you know the name or part of XHR URL which you need to debug you can add it XHR by clicking the ( + ) icon.

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.

Answer 3

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.