Simulating an individual script timeout (or slow load) with Chrome DevTools

Question

I am trying to work out how to use Google Chrome DevTools to simulate a timeout on a JavaScript file on my site.

I can use the 'Toggle Device Mode' to introduce throttling but that doesn't target a specific script.

Is there a way to do this with DevTools?

I am using Chrome 38.

Ariew

Answer 1

DevTools technical writer and developer advocate here. As of January 2018:

• You can't network-throttle individual requests in DevTools. You can block them, though, which is what I assume you mean by "timeout". See Block Requests.
• You could use a service worker to network-throttle individual requests.

Haven't tested this code, but something like this might work for the service-worker-based throttling:

self.addEventListener('fetch', event => {
  const TARGET = 'example.com';
  const DELAY_MS = 1000;
  if (event.request.url === TARGET) {
    setTimeout(() => {
      event.respondWith(caches.match(event.request));
    }, DELAY_MS);
  }
});

Graiae

This didn't work for me, and injecting log statements within the callback and if block didn't output anything when the calls were fired. Is there some small tweak that would make this work in the latest version of Chrome (78.x)? – Methylnaphthalene

Answer 2

In Chrome you can setup a new network profile with custom download/upload bandwidth and latency time.

Use a long enough latency value to trigger a request timeout.

Combatant