Webアプリケーションの準正常系確認に便利！Google ChromeのRequest blockingを活用する

こんにちは。サービスグループの武田です。

Webアプリケーションを作る中でいろいろな動作確認を行いますよね。正常系の確認は試しみればよいですが、たとえば特定のリクエストが失敗した場合の挙動などは簡単に試せません。また最近はシングルページアプリケーション（SPA）が主流となってきており、バックエンドのWeb API呼び出しに失敗した場合もクライアントサイドで考慮する必要があります。

今回はGoogle ChromeのRequest blockingという機能を利用して、一部のリソースの取得に失敗した場合の挙動を確認してみました。これを応用すると、バックエンドのWeb API呼び出しに失敗した場合の動作をシミュレートできます。

環境

• OS
  • macOS High Sierra
• ブラウザ
  • Google Chrome

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.13.4
BuildVersion:   17E202

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --version
Google Chrome 66.0.3359.139

Request blockingを使ってみる

今回はDevelopers.IOを例に、Request blockingを使ってみます。サイトを開いたらChromeのDevToolsを起動しましょう。表示 > 開発 / 管理 > デベロッパー ツールの順にメニューを開きます。

次にRequest blockingのタブを開きます。ポチ3つ > More tools > Request blockingの順にメニューを開きます。

Request blockingのタブが開かれると、次に+またはAdd pattern.を選択してブロックするリクエストを指定できます。

ブロックするリクエストのURLを部分一致で指定します。*をワイルドカードとして利用できます。試しにDevelopers.IOを開く際に*.pngをブロックしてみます。png画像をブロックしたらどうなるでしょうか。

ページをリロードしてみます。

png画像のみ表示されていませんね。

実際のリクエストからブロックする

先ほどはブロックするパターンを直接入力しましたが、実際のリクエストから完全一致または同一ドメインをブロックするパターンを簡単に指定できます。

ここではicatch2017.pngと同じドメインのリクエストをブロックしてみます。Networkタブを開き、対象のリクエストを右クリックし、Block request domainを選択します。ちなみにBlock request URLを選択すると、そのリクエストのURLが丸々ブロックパターンに追加されます。

cdn-ssl-devio-img.classmethod.jpが追加されました。

ページをリロードしてみます。

今度はすべてのpng画像ではなく、cdn-ssl-devio-img.classmethod.jpドメインのリソースのみがブロックされ、先ほどとは表示のされ方が異なっています。

まとめ

今回は画像のリクエストなどをブロックしてChromeのRequest blockingを試してみました。テストやデバッグの際にWeb APIのリクエストをブロックすることで、バックエンドのサーバーがダウンした場合などを簡単にシミュレートできます。

ブラウザの機能だけでこういった動作確認もできるなんてすばらしいですね！