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) })
そして制限をかける方法と、かけた結果がこちら。
回線の細い環境をエミュレート
2枚目の GIF にもチラッと映ってる通り、DevTools の Network タブをクリックし、 「No throttling」のプルダウンをクリックすると「Presets」以下に回線が細い環境などをエミュレートするためのプリセットが色々表示されている。
Chrome DevTools は偉大
JS を実行制限させたかったら大体 DevTools でなんとかできる(適当)と思ってるので、もしそういうケースがあったら一度 DevTools 開いて色々探してみると良い。
*1:そもそも自動化しろという話だけど…