Web アプリケーション開発を行っていると、「不安定な低速度の通信環境からアクセスした場合の Web ページの挙動」を確認したい場面に出くわすことがあるかと思います。
このために低速度の通信環境を用意するのはお金も手間もかかって大変だと思うのですが、Google Chrome のデベロッパーツールを使えば、簡単に低速度での通信環境をシミュレートすることができるので紹介したいと思います。
Google Chrome のバージョン
本記事執筆の際に使用した Google Chrome のバージョンは次の通りです。
- 114.0.5735.134（Official Build） （64 ビット）
シミュレート 方法
Google Chrome でシミュレートを行いたい Web ページにアクセスしてデベロッパーツールを開きます。
開いたら「Network」タブをクリックします。
Network タブをクリックしたら、「No throttling」という箇所をクリックします。
予め Presets がいくつか登録されているので、任意の通信環境を選択します。
今回は Fast 3G を選択してみます。
選択後、デベロッパーツールは開いたままにして Web ページをリロードすると、選択した通信環境で Web ページの挙動をシミュレートできます。
筆者は使用したことがありませんが、Custom で自分好みの Presets を作成することもできるようです。
さいごに
Web アプリケーションで、外部 API を叩いて取得したデータを表示する際に "Now Loading..." などロード中だと分かるような表示（プログレス表示）を実装することがあるかと思いますが、
開発時は安定した高速度な環境で通信することが多く、あっという間に外部 API からデータが取得でき、プログレス表示が上手く実装できたかどうかが分かりづらい場合があるかと思います。
そういう場合には、今回の方法が役に立つのではないかと思います。