デベロッパーツールでAPIレスポンスをオーバーライドする方法！

開発中に「APIのレスポンスを自由に変更できたら便利なのに…」と思ったことはありませんか？

例えば、こんな場面です。

• APIの返すデータを一時的に変更して動作確認したい
• バックエンドの開発がまだ完了していないけれど、フロントエンドの開発を進めたい

そんなときに役立つのが、Google ChromeのDevTools（デベロッパーツール）の「オーバーライド機能」です。この機能を使えば、APIのレスポンスを自由に変更し、フロントエンドの開発やデバッグをスムーズに進めることができます。

この記事では「APIレスポンスをオーバーライドする方法」と「オーバーライドしたAPIレスポンスを停止する方法」について図を用いて詳しく解説します。

APIレスポンスをオーバーライドする方法

デベロッパーツールの[Network]タブを開く

まず、Google Chromeのデベロッパーツール（DevTools）を開きます。Windowsの場合はF12、Macの場合はCmd + Option + Iを押すと、Google Chromeのデベロッパーツールが開きます。デベロッパーツールが開いたら、[Network]タブを選択します。

オーバーライドしたいAPIリクエストを選択する

オーバーライドしたいAPIリクエストを右クリックして、「Override content」を選択します。

保存先フォルダを選択する

初めてオーバーライド機能を使う場合、オーバーライド用のフォルダを選択する必要があります。画面上部に表示されている「Select folder」をクリックします。

フォルダ選択ダイアログが開くので、任意のフォルダを選択します。

フォルダアクセスに関する確認が出るので許可します。

APIレスポンスを編集する

[Sources]タブの「Overrides」に先ほど選択したフォルダが追加されます。そのフォルダ内に、オーバーライドするAPIレスポンスのファイルが表示されます。

オーバーライドするAPIリクエストのファイルを編集すると、APIレスポンスをオーバーライドすることができます。DevTools上でも編集が可能ですが、お好みのエディタ（例: VSCode）を用いて編集することもできます（今回はDevtools上で編集しました）。

APIリクエストを再送信する

ブラウザをリロードして再度APIリクエストを送信すると、オーバーライドしたAPIレスポンスが返ってくることが確認できます。

補足

[Network]タブを見ると、オーバーライドされたAPIレスポンスは上書きされた目印として紫色のツールチップが表示されます。

オーバーライドしたAPIレスポンスを停止する方法

オーバーライドしたAPIレスポンスを停止する方法は2つあります。

• 一時的に停止する
  • [Sources]タブの「Overrides」から「Enable Local Override」のチェックを外す。
  • これで一時的にオーバーライドが停止され、元のレスポンスが返る。
• 完全に停止する
  • [Sources] > [Overrides] でオーバーライドファイルを削除する。
  • または、ファイルの横にある 🚫アイコン（削除ボタン） をクリックする。
  • これでオーバーライド設定が完全に停止されます。

【補足】レスポンスヘッダーもオーバーライドが可能です

APIレスポンスのデータを変更する場合には「Override content」を選択しましたが、「Override header」を選択することでレスポンスヘッダーも同様の手順でオーバーライドすることができます。「CORSの設定を変更して特定のリクエストを許可したい場合」や「キャッシュや認証関連のヘッダーを変更して挙動を確かめたい場合」に便利な機能です。

本記事のまとめ

この記事では『デベロッパーツールでAPIレスポンスをオーバーライドする方法』について、以下の内容を説明しました。

Google ChromeのDevToolsを活用することで、APIレスポンスを自由に変更し、フロントエンド開発やデバッグをスムーズに進めることができます。特に、バックエンドが未完成の段階でフロントエンドの開発を進めたり、特定のレスポンスを想定した動作確認を行いたい場合に便利です。

お読み頂きありがとうございました。