Devtools では fetch リクエストのレスポンスをオーバーライドできる
俺らdevtoolsでレスポンスオーバーライドするだ
テストも無ぇ！型も無ぇ！おまけに分岐がふ〜くざつ！こんなコンポーネント嫌だ〜...と思いつつ、そうも言ってられないので、まずは一番大外のコンポーネントに MSW + Jest でテストを書いています。
API レスポンスに対して適切な TypeScript の型がないことと、レスポンスに含まれる項目が多いこともあり、とりあえず書いてみたモックレスポンスが正しいのか確証が持てない状態でした。
そのような状態でテストも変なところで落ちるものだから、「モックレスポンスがおかしいのか、他のテストのセットアップが悪いのか？」とてんやわんや。
そんな時 Devtools の Local Override を利用すると、実際に動いているアプリ上でそのレスポンスが正しい振る舞いをするのかどうかさっと検証できて便利でした（本来上記のようなケースでは、API のレスポンスをスキーマから自動で生成するのが望ましいと思っていますが、それはそれとして）。
通常の開発においてもざっくりとした挙動を確認する際には便利なので、今回はその使い方を紹介します。
Local Override でレスポンスを置き換える
Local Override は Chrome の Devtools の Network タブで利用できる機能です。画像やスクリプトファイル、レスポンスヘッダーなどを置き換えることができます。
オーバーライドを作成する
- Devtools の Network タブを開く
- レスポンスをオーバーライドしたいリクエストを右クリック
- 「Override Content」を選択
- 初回はオーバーライドしたファイルの保存先を指定する必要があるので、画面上部の「Select folder」を選択
- フォルダアクセスに関する確認が出るので許可
- 「Sources」タブの「Overrides」にフォルダが追加される
最初にオーバライドする対象として選択されたコンテンツが、指定したフォルダ内に複製され、編集可能になります。
レスポンスをオーバーライドする
先ほどの手順でオーバーライドを作成したので、そのファイルを編集してレスポンスをオーバーライドします。
今回は PokeAPI を使ってポケモンをただただ羅列したデモアプリをサンプルに変更していきます。
まずは先ほどの手順でフシギダネの詳細を取得するリクエストを選択し、レスポンスをオーバーライドします。
Devtools 上でも変更が可能ですが、量が多いと大変なので、お好みのエディタ（ここでは VSCode）を用いて編集することをお勧めします。
ビューではレスポンスに含まれる日本語名を使って表示しているので、ここを適当な名前に変更してみます。
ローカルで値を変更し、ブラウザをリロードして再度リクエストを送信すると、オーバーライドしたレスポンスが返ってくることが確認できます。
オーバーライドされたレスポンスは Network タブ上で上書きされた目標として紫色のツールチップが表示されます。
オーバーライドを停止する
オーバーライドの停止には無効化による一時停止と、削除による完全停止の 2 つの方法があります。
とりあえず上書きしてみたもののうまくいかない、実際のレスポンスを一度確認したい、といった場合には、Sources タブ Overrides タブから「Enable Local Override」をオフにすることでオーバーライドを一時的に停止できます（再読み込みが必要です）。
オーバーライドを完全に削除するにはその横にある🚫アイコンをクリックします。オーバーライド先がなくなるので、通常のレスポンスに戻ります。
レスポンスヘッダ もオーバーライドできる
あまり積極的に使う機会はありませんが、レスポンスヘッダーも「Override headers」を利用することで、同様の手順で置き換えることができます（置き換えた場合、各通信の Headers タブに Response 同様の紫のツールチップが表示されます）。
Local Override は画像やスクリプトにも使える
本記事の趣旨とは外れるので詳細は割愛しますが、Local Override は画像やスクリプトにも使えます（むしろレスポンス自体のオーバーライドの方が Local Override の中では後発の機能で、Chrome 117 から利用できるものです）。
ユースケース
開発中の簡易モックサーバとして利用する
恒久旧的にはブラウザ版の MSW を使った方が利便性・汎用性は高いですが、API 実装前にフロントエンドだけで挙動を確認したい、といった場合には Local Override が適しています。
冒頭に挙げたような型も any である状態だと補完等もあまり効きませんが、TypeScript の型定義があれば、ローカルエディタ上で編集することで JSON のキー等は Copilot の補完が効き、いくらか編集しやすいはずです。
リアルタイムでデモをするときに利用する
まだ開発中の画面の仕様相談を Designer や PdM に相談時、「このデータパターンだとどうなりますか？」と質問を受けた際に、その場でさっとイメージを見せるのにも使えます。
ここは変更箇所によってケースバイケースで、先ほどのポケモンの例のように単一の値をただ書き換えるのであれば、design_mode を利用した方が速いはずです。
// Chrome の console で起動することで、ページが編集可能になります。
document.designMode = 'on'
1 つのレスポンスによって色々と計算し、それを画面に反映させるような場合には Local Override が使えるでしょう。
おわりに
今回の Local Override により、私の中で Devtools コンテンツ上書き四天王が揃いました。
- レスポンスを上書きする Local Override
- User-Agent を偽装する Network Condition
- スタイルシートを上書きする Element
- コンテンツを上書きする design_mode
...と 4 つあげてから「いや位置情報も上書きできるな」「通信状況も変えられる...」「デバイスの方がもっとメジャーでは？」などと思い始めてしまいましたが、それはそれとして、Devtools を活用することで、さまざまな状況を確認できます。
今回は Local Override を取り上げましたが、上述の通り Devtools にはいくつも機能があり、また新しい機能も定期的に追加されているので、気になる方は Devtools の新機能をチェックしてみてください。
Discussion