【Firefox】開発ツールの帯域制限機能を使用して通信速度を制限する

【Firefox】開発ツールの帯域制限機能を使用して通信速度を制限するの図

今回は、Firefoxの開発ツール(デベロッパーツール)の帯域制限機能を使用して通信速度の制限を行います。

Chromeの開発ツールの帯域制限機能には劣りますが、Firefoxでも似たような機能を使用することができます。

帯域制限の必要性

基本的にWebサイトの開発で、わざわざ通信速度の遅い環境で開発を行うことはまずないと思いますが、ユーザーの環境によっては、通信速度が遅い場合もあり、実際にそのような環境ではWebサイトがかなり違って見えることがあります。

帯域制限をして通信速度を制限することで、通信速度の遅い環境での動作確認を行うことができます。

帯域制限を使用する

まずはじめに、Firefoxの開発ツールを開きます。開発ツールの開き方は、下記のような方法があります。

  • F12
  • Ctrl + Shift + I
  • サイトを右クリック → 調査
  • メニューバー → その他のツール → ウェブ開発ツール

【Firefox】開発ツールの帯域制限機能を使用して通信速度を制限するの図

するとこのような画面が表示されます。

【Firefox】開発ツールの帯域制限機能を使用して通信速度を制限するの図

ネットワークを選択します。

【Firefox】開発ツールの帯域制限機能を使用して通信速度を制限するの図

右側の帯域制限なしをクリックして好きな帯域制限を適用します。

それぞれの項目の詳細は以下の通りです。

項目ダウンロード速度アップロード速度最小レイテンシ
GPRS50 Kbps20 Kbps500 ms
Regular 2G250 Kbps50 Kbps300 ms
Good 2G450 Kbps150 Kbps150 ms
Regular 3G750 Kbps250 Kbps100 ms
Good 3G1.5 Mbps750 Kbps40 ms
Regular 4G / LTE4 Mbps3 Mbps20 ms
DSL2 Mbps1 Mbps5 ms
Wi-Fi30 Mbps15 Mbps2 ms

まとめ

残念ながら、Chromeと比べるとだいぶ機能が少ないように感じますが、Firefoxの開発ツールの帯域制限機能を使用して通信速度の制限を行いました。

過去には帯域制限をするアドオンもあったようですが、現在はリンク切れになっているようです。 機会があれば、アドオンを作ってみたいと思います。