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.

Answer 1

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.

Answer 2

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);
  }
});