2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

この記事誰得? 私しか得しないニッチな技術で記事投稿!

Google Chrome で低速度の通信環境での Web ページの挙動を確認する方法

Posted at

Web アプリケーション開発を行っていると、「不安定な低速度の通信環境からアクセスした場合の Web ページの挙動」を確認したい場面に出くわすことがあるかと思います。

このために低速度の通信環境を用意するのはお金も手間もかかって大変だと思うのですが、Google Chrome のデベロッパーツールを使えば、簡単に低速度での通信環境をシミュレートすることができるので紹介したいと思います。

Google Chrome のバージョン

本記事執筆の際に使用した Google Chrome のバージョンは次の通りです。

  • 114.0.5735.134(Official Build) (64 ビット)

シミュレート 方法

Google Chrome でシミュレートを行いたい Web ページにアクセスしてデベロッパーツールを開きます。
開いたら「Network」タブをクリックします。
image.png

Network タブをクリックしたら、「No throttling」という箇所をクリックします。
image.png

予め Presets がいくつか登録されているので、任意の通信環境を選択します。
今回は Fast 3G を選択してみます。
image.png

選択後、デベロッパーツールは開いたままにして Web ページをリロードすると、選択した通信環境で Web ページの挙動をシミュレートできます。
筆者は使用したことがありませんが、Custom で自分好みの Presets を作成することもできるようです。

さいごに

Web アプリケーションで、外部 API を叩いて取得したデータを表示する際に "Now Loading..." などロード中だと分かるような表示(プログレス表示)を実装することがあるかと思いますが、
開発時は安定した高速度な環境で通信することが多く、あっという間に外部 API からデータが取得でき、プログレス表示が上手く実装できたかどうかが分かりづらい場合があるかと思います。

そういう場合には、今回の方法が役に立つのではないかと思います。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?