Chrome DevTools Approve Network Requests before executing

Question

I'm looking for a way in Chrome DevTools (or any equivalent) to control the HTTP requests done by my web application:

I want to approve HTTP requests before executing, or let them fail in an unexpected way (give it status 500 or something).

USAGE EXAMPLE: Testing unexpected behavior

Does anyone know a way to achieve this.

Answer 1

I see 2 possible solutions to achieve this goal on the client side:

1. Use the Request-Blocking panel from the Drawer (Open Chrome DevTools -> Esc -> '...' -> Request blocking This is completely out-of-the-box and works for most "offline-first" use cases.

2. Use a service worker. They are basically a way to proxy requests and respond individually (e.g. by responding with a 500-er). You might want to enable/disable such a debugging-feature by using Chrome Devtools Snippets (Open Chrome DevTools -> Sources -> Snippets) as you don't want your requests to fail all the time :)

First you need to register your serviceworker like this:

if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/path-to-service-worker.js').then(function(registration) {
    // registration successful
  }).catch(function(err) {
    // registration failed
  });
}

Afterwards reload the browser (or install your service-worker in the DevTools -> Application -> Service Workers) so that your service-worker.js is active, may listen to the 'fetch' event and proxy the requests for this domain like this:

self.addEventListener('fetch', function(event) {
  // this will set a breakpoint in chrome devtools, allowing you to manually edit the response
  debugger; 
  // alternatively you could reponse with an error response like this:
  event.respondWith(
    new Response(null, {
      status: 500
    })
  );
});

Sidenote: Due to security restrictions in the browser serviceworkers only work over https and on localhost.

Further information: https://developer.mozilla.org/en-US/docs/Web/API/Response/Response https://developers.google.com/web/fundamentals/primers/service-workers/