Chrome DevToolsでHTTPレスポンスをローカルでオーバーライドできる

某所でoverrideの話題を見て、そういえば使ったことなかったので改めて調べてみた

使い方

DevToolsのNetworkパネルに移動→オーバーライドするリクエストを右クリックして、プルダウンメニューから [Override headers]または[Override content] を選択する。 ローカルオーバーライドをまだ設定していない場合は画面上に「Select folder」が表示されるので押す。オーバーライドしたファイルの保存先を選択する。

アクセス権を付与するとSourcesタブのOverridesにフォルダが追加される。

これでレスポンスをオーバーライドできるようになる。 SourcesタブのOverridesで「Enable Local Overrides」をオフにすれば一時的にオーバーライドを停止でき、🚫をクリックすれば通常のレスポンスに戻る。

ローカルオーバーライドが役にたつユースケース

公式にユースケースが載っていた。 https://developer.chrome.com/docs/devtools/overrides?hl=ja

• 実際に本番環境に移行する前に、API のモックと API の修正をテストします。
• バックエンドで使用するデータ構造がすでにわかっている場合は、新しい UI デザインのプロトタイプを作成します。
• CLS の除去など、パフォーマンスの修正をテストして、効果が大きいことを事前に確認します。

フロントエンドとバックエンド別々で開発しているときに事前にリクエスト内容がわかっていれば手軽に試せて良さそう。

参考

• https://developer.chrome.com/docs/devtools/overrides?hl=ja
• https://zenn.dev/ikuma/articles/override-network-response