読者です 読者をやめる 読者になる 読者になる

Chrome DevTools で使える通信制限(オフライン環境をエミュレートする方法)

先日、単体テストを行っていて JS からのリクエストを失敗させるテストケースがあった。 バックエンドのサーバを停止させればいいが、毎回起動したり停止したりするのは面倒。 ということで効率の良いテスト実施方法がないか調べていた。*1

通信制

結論から言うと、タイトルの通り Chrome の DevTools の機能で擬似的にオフラインの環境や、回線が細い環境をエミュレートできる。

以下スクリーンショット

オフライン環境をエミュレート

まずは Ajax で GET リクエストを飛ばす。 コンソールで jQuery を読み込ませて GET / してみる。

// jQuery をロード
var $script = document.createElement('script');
$script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild($script);
// GET リクエスト送信
jQuery.get('/', res => { window.alert(res) })

f:id:tyru:20160808004231p:plain

そして制限をかける方法と、かけた結果がこちら。

f:id:tyru:20160808004235g:plain f:id:tyru:20160808004239p:plain

回線の細い環境をエミュレート

2枚目の GIF にもチラッと映ってる通り、DevTools の Network タブをクリックし、 「No throttling」のプルダウンをクリックすると「Presets」以下に回線が細い環境などをエミュレートするためのプリセットが色々表示されている。

Chrome DevTools は偉大

JS を実行制限させたかったら大体 DevTools でなんとかできる(適当)と思ってるので、もしそういうケースがあったら一度 DevTools 開いて色々探してみると良い。

あと GyazoGyazo GIF は便利。

*1:そもそも自動化しろという話だけど…