Network Speed Simulation for Testing
Recently I came across a production issue for the project I am working on. The error was that the page shows the loading icon and stays in that state when the internet speed is slow. On analysing the issue developers found that when the network speed is slow and the page is unable to download the js file with 7 seconds (specified time out), and it goes into that load state. Probably one tip here would be test out your application on a slow network speed. Generally while we test the app, we are on the best of the internet speed.
So this post is about how you can simulate the low network speed and test your app on browser. There is a tool called Charles (website link) which will let you simulate the slow network speed. By the way it's a paid tool which has a trial version as well which runs for good 30 minutes. Trial version solved the problem for me so I would recommend using that first.
Step 2: It has a Firefox add on as well. And you might want to install that if you want to test on Firefox browser.
Once you launch the app, below is how the app would look like.
Click on Proxy and select "Mozilla Firefox Proxy". Once you select this, your firefox proxy would get modified to use a manual proxy settings and look like below.
Once this proxy settings are enabled, then you can enable the Throttling (Use Control +T). Then click on the Throttle Settings which will open a pop up. In the new window you can select the different throttle preset like 3G or 56 kbps Modem etc. In case you want to limit it to a specific bandwidth, you can do so by entering directly the desired upload and download speed.
So in my case I selected the desired preset as 3G and was able to replicate the issue.
In case you want to try out some other browser, select the option "Windows Proxy". This option sets the proxy at the OS level.