How to simulate slow network locally in your browser

simulate slow network
By Andrianarisoa Daniel

As a developer, we do develop our projects locally in our computer before shipping it to the public on the internet. When building a website for example, it is very familiar to run a dev server on localhost and watch changes we've made in live inside our browsers. However, localhost does not always reflect reality of a production environment and on top of that refresh is so fast that we couldn't observe the different states of our app. For example, loading states are almost invisible to human eye when working on localhost because it is very fast.

fast loading state

Thankfully for us, modern browsers offer useful tools to help us developers. Including an out of the box network throttling simulator. Let's see how you can leverage that feature in any browser.

Note: In this example I am going to use microsoft edge (the chromium version), but the process is fairly the same as browsers are quite similars.

Press the keyboard shortcut: ctr + shift + i or right click anywhere in current page then select inspect from the context menu. You have just opened the browsers' dev tools. Enter into the the Network panel then click on throttling, various options are available: No throttling (the default), Slow and fast 3G or emulates an offline status. You can even add your custom preset!!

network dev tool tab

Now you can easily watch the state evolution of your app's when in development mode within localhost. The network is virtually slowed down inside the browser by this setting.

slowed down loading state

Last but not least, don't forget to reset this setting to default e.g. to no throttling when you stop developing and start browsing the internet because it affects all tabs of the current browser.

Hope you liked this post, and have a great day working on your projects. ๐Ÿ˜‰