Skip to content

goodguydaniel.com

Simulate Delays in HTTP Requests

Without writing any code!

Productivity, Software Testing2 min read

There might be a few reasons why we would want to delay an HTTP request:

  • You want to test how your UI behaves to a slow response from an upstream service.
  • There's a race condition in my code, and I suspect that it happens when the request to A is slower than the request B.
  • You want to show off that beautiful loading animation you've been working on all day!

This approach makes use of the tweak browser extension. I'll use the tweak test application to delay an HTTP request that triggers a click in a UI element. There's a loading animation in place with a timer, so we can see the difference when actually delaying the HTTP request.

1. Install the tweak chrome extension

Jump over to the Chrome store and install the tweak browser extension. Also available on Firefox.

2. Configure the request you want to delay

Here's how we set up the request to be delayed.

screenshot devtools tweak test application

source: © 2020 by goodguydaniel.com

In the screenshot we have the request we're targeting to delay.

  1. Go over the browser network tab in the developer tools.
  2. Now, collect the following information from the request you want to see delayed:
  3. The Request URL (or at least a piece of it that uniquely matches that URL).
    • The HTTP method.
    • Optionally grab the request payload (a.k.a. request body) when dealing with POST, PUT, or PATCH requests.
    • The HTTP response payload (optionally, you can change it).
  4. In the tweak Chrome extension, click on the plus button to add a new configuration.
  5. Fill in the configuration with the information you collected.
    • Request URL.
    • Select your HTTP method from the dropdown.
    • Add the response payload.
    • Optionally specify the request payload for POST, PUT, or PATCH requests.
    • Add the desired value of the delay.
    • Click on the Play icon in the top bar of the extension to enable it.

sample tweak configured

source: © 2020 by goodguydaniel.com

In this example we delay the request by 5 seconds.



3. Trigger the request and see the delay in action

Now that you've enabled the Chrome extension, you need to trigger that HTTP request that you want to delay (e.g., refresh the page if the request fires at page load, click on some UI element if the request is dispatched based on some user interaction).

source: © 2020 by goodguydaniel.com

After enabling the extension the targeted HTTP request is now delayed by 5 seconds.

You're now able to delay HTTP requests across any environment, most importantly, without writing any code! At any time, you can go back to the extension and tweak the delay value! If the value is set to 0, no delay will be applied to your HTTP request.

You can consult the official documentation of the browser extension if you want to explore its other capabilities.