As a developer, we do develop our projects locally on our computers before shipping them 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 live inside our browsers. However, localhost does not always reflect the 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 the human eye when working on localhost because it is very fast.

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 similar.

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

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

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. 😉