kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Chrome DevTools で「オフライン環境」をエミュレートする

例えば「オフライン対応」のアプリケーションを実装して動作確認をするときなど「オフライン環境」が必要になる場合もある.単純に WiFi をオフにすれば良いこともあるけど,WiFi をオフにせず,部分的にオフライン環境をエミュレートできると便利.具体的には,先週とあるライブコーディングを自宅から配信したときに,WiFi をオフにせず「オフライン環境のテスト」をする必要があった.

Chrome DevTools を使う

developers.google.com

Chrome DevTools を使えば,簡単にオフライン環境をエミュレートできる.Network タブを開き Disable cache の右側にあるプルダウンから「Offline」を選ぶ.すると,設定したタブはオフライン環境になる.

f:id:kakku22:20200410235002p:plain

ネットワーク設定は「計4種類」から選べる.さらに Add... から自由に Network Throttling Profiles を作れる.Download (kb/s)Upload (kb/s)Latency (ms) を自由に設定できるため,低速ネットワーク環境におけるフロントエンドのレンダリング確認などに使える.

  • Online(デフォルト)
  • Fast 3G
  • Slow 3G
  • Offline

f:id:kakku22:20200410235217p:plain

おまけ : Chrome Dino Game も遊べる

オフライン環境をエミュレートすれば Chrome Dino Game も遊べる!とは言え,実はオフライン環境をエミュレートしなくても,直接 chrome://dino/ にアクセスすれば遊べる.気分転換に便利!

f:id:kakku22:20200411000247p:plain

まとめ

今回は Chrome DevTools の小ネタを書いた.Chrome でオフライン環境をエミュレートする場合は Network タブを開き「Offline」を選ぼう!