9

Is there any way to add a time delay to a script/asset loading in the Google Chrome Browser via the Chrome Developer Tools? Or to block a script loading entirely?

The reason I want to do this is to see how a site performs when a script/asset suffers from delayed loading or failed loading.

Sachin Jain
  • 21,353
  • 33
  • 103
  • 168
James
  • 1,233
  • 3
  • 13
  • 18
  • You can do this [using Fiddler](https://stackoverflow.com/questions/16276669/simulate-network-speeds-using-fiddler) – Liam Jul 02 '20 at 14:33

6 Answers6

6

In Chrome Developer Tools when you are in the Network you can add custom throttling. You can specify download and upload speed as well as request latency. But this will apply to all resources and not only to a specific one.

--- edit ---

For delay individual URLs on any page, you can use a chrome extension (since it can intercept browser requests). I use https://chrome.google.com/webstore/detail/url-throttler/kpkeghonflnkockcnaegmphgdldfnden

Erik
  • 2,888
  • 2
  • 18
  • 35
2

If the asset is a third party or hosted on a different domain, there is a Chrome plugin that's designed to test what you are calling loading delays, that are also called SPOF (Single Point Of Failure). It might not be very intuitive at first use, but it's very helpful :

The plugin is called SPOF-O-Matic and can be found here: https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg

Gaël Métais
  • 804
  • 7
  • 7
2

Following solutions have nothing with Chrome Devtools but they work.

If you don't mind redirects then you can try Slowwly or deelay.me.

Other alternative for non-windows OS is Comcast.

Martin Ždila
  • 2,998
  • 3
  • 31
  • 35
2

You can use Requestly Browser Extension or Desktop App to modify your network requests. Delaying/Throttling scripts is one of the use-cases amongst many already supported in Requestly.

Here's how you can do it. Once you install Requestly, Use the Delay Request feature.

Create New Rule & Select Delay Rule Type

Select Delay Request Rule Type

Define URL (or URL Pattern) and the delay value

Delay Request Rule Editor

This article explains 3 different approaches to add delay/throttle APIs (or network requests). However, in your case Requestly extension based approach should work best.

PS - I built Requestly.

Sachin Jain
  • 21,353
  • 33
  • 103
  • 168
1

You can do it by combining multiple resources.

I use http://www.deelay.me/ to generate the delayed url.

I then combine it with requestly extension (https://requestly.io/) to create a host replace rule to target a specific resource

Daniel
  • 34,125
  • 17
  • 102
  • 150
1

This devtools extension can fit your requirement, Its a Chrome/Firefox devtools extension that can simulate http request delay for any configurable URL. Chrome devtools extension webstore

coder_ll
  • 29
  • 2