例えば「オフライン対応」のアプリケーションを実装して動作確認をするときなど「オフライン環境」が必要になる場合もある.単純に WiFi をオフにすれば良いこともあるけど,WiFi をオフにせず,部分的にオフライン環境をエミュレートできると便利.具体的には,先週とあるライブコーディングを自宅から配信したときに,WiFi をオフにせず「オフライン環境のテスト」をする必要があった.
Chrome DevTools を使う
Chrome DevTools を使えば,簡単にオフライン環境をエミュレートできる.Network タブを開き Disable cache の右側にあるプルダウンから「Offline」を選ぶ.すると,設定したタブはオフライン環境になる.
ネットワーク設定は「計4種類」から選べる.さらに Add... から自由に Network Throttling Profiles を作れる.Download (kb/s) と Upload (kb/s) と Latency (ms) を自由に設定できるため,低速ネットワーク環境におけるフロントエンドのレンダリング確認などに使える.
- Online(デフォルト)
- Fast 3G
- Slow 3G
- Offline
おまけ : Chrome Dino Game も遊べる
オフライン環境をエミュレートすれば Chrome Dino Game も遊べる!とは言え,実はオフライン環境をエミュレートしなくても,直接 chrome://dino/
にアクセスすれば遊べる.気分転換に便利!
まとめ
今回は Chrome DevTools の小ネタを書いた.Chrome でオフライン環境をエミュレートする場合は Network タブを開き「Offline」を選ぼう!