As a frontend developer or QA, we want to test our website performance in different network conditions and with different API latencies too. Testing certain components of web applications requires simulating delay in one or more web app components.This is required in scenarios like:- Test performance of your web app on a slower network- Test behaviour of your app when one or more APIs respond slow (API Latency has gone up)- Check if any race conditions exist in your JS Code- Test the impact of slow loading of external resources (JS, CSS, Images, etc) on your app.Here's an article [0] that focuses on the different approaches that enable developers to simulate network delays in the API requests or while loading JS or CSS resources. There are various methods available to simulate the network conditions.- Throttle Network Traffic using Browser DevTools Network Throttle feature [1]- Publicly available APIs which respond with delay and using a Browser Extension to redirect your actual request to those Public APIs- Chrome Extension which adds actual delays to the network requestsThe article [0] talks about the above approaches and limitations of each approach - Adding Delay to Network Requests. This also explains which approach you should prefer and in what testing conditions.TLDR; Here is the conclusion- To test your entire application on a slower network, prefer using the browser's network throttling feature.
- To add delays to external resources like CSS, JS, etc prefer using Server Side delay.
- To simulate delays to your API requests (& AJAX requests) prefer using Client-Side delay using the browser extension.Have your ever simulated delay in your web app testing? Was Chrome DevTools Network Throttling helpful in debugging your issue? What tool did you use to solve the problem? I am interested in knowing the related problem statements and the creative solutions.[0]:  