API呼び出しに失敗した状態をGoogle Chrome開発者ツールで再現してみる

始めに

WEB開発を行っており、とある異常なデータを検知しました。
ログを探るとフロントであるAPIの呼び出しがネットワークの不調により失敗をしていたことが分かりました。そのAPIの呼び出しに失敗し、取得できるはずのデータが存在しなかったため、その後の処理で異常になったように見えます。
ただし、本当にそうであるか再現確認をする必要があります。

ネットワークを低速モードにして、途中まで読み込んだら読み込み停止！　など頑張っていましたが、思うようにいかず、別の方法で失敗できないか調査したところ、よいブロックの方法が見つかりました。

ブロックのやり方

折角ですのでQiitaの自身のアイコンをブロックして見えなくしたいと思います。操作はWindowsで実施しています。

1. 対象のページを開く
   https://qiita.com/organizations/uniquevision
   

2. おもむろに開発者ツール(F12)を立ち上げる
   

3. ページを更新(F5)する
   Qiitaでは「デバッガ内で一時停止」と表示されますが、この再現確認では関係してこないのでそのまま再生のアイコンを押してください
   

4. ネットワークのタブを開き、失敗したいAPIを右クリックする
   画像取得系はアイコンが出ているので分かりやすいです。
   

5. 「ブロック リクエストのURL」をクリックする
   

6. 再度更新(F5)する
   アイコンが表示されなくなりました。実際にも失敗したAPIで同様のことを行い、無事再現確認が出来ました。
   

ブロックの解除の仕方と戻し方

一度ブロックしたとしても開発者ツールを閉じて更新(F5)すると、ブロックは解除されます。
ブロックした際の設定はしっかり残してくれています。
再度開発者ツールを開き、「ネットワーク」から「ネットワーク リクエストのブロック」を確認すると、以前設定していた項目が無効な状態で残っています。
「ネットワークリクエストのブロックを有効にする」を有効にするか、さらに別のリクエストをブロックすることで、リクエストのブロックは有効になります。

その他

• 手順5で、「リクエスト ドメインのブロック」を指定するとすべてのiconが表示されなくなります
  

• ワイルドカードを使用してあるパターンにマッチするAPIをブロックすることも可能です