テストを書いています。型がないことと、レスポンスに含まれる項目が多いこともあり、とりあえず書いてみたモックレスポンスが正しいのか確証が持てない状態でした。そのような状態でテストも変なところで落ちるものだから、「モックレスポンスがおかしいのか、他のテストのセットアップが悪いのか?」とてんやわんや。レスポンスをスキーマから自動で生成するのが望ましいと思っていますが、それはそれとして)。通常の開発においてもざっくりとした挙動を確認する際には便利なので、今回はその使い方を紹介します。タブで利用できる機能です。画像やスクリプトファイル、レスポンスヘッダーなどを置き換えることができます。「Sources」タブの「Overrides」にフォルダが追加される最初にオーバライドする対象として選択されたコンテンツが、指定したフォルダ内に複製され、編集可能になります。レスポンスをオーバーライドする先ほどの手順でオーバーライドを作成したので、そのファイルを編集してレスポンスをオーバーライドします。使ってポケモンをただただ羅列したデモアプリをサンプルに変更していきます。先ほどの手順でフシギダネの詳細を取得するリクエストを選択し、レスポンスをオーバーライドします。VSCode)を用いて編集することをお勧めします。ビューではレスポンスに含まれる日本語名を使って表示しているので、ここを適当な名前に変更してみます。ローカルで値を変更し、ブラウザをリロードして再度リクエストを送信すると、オーバーライドしたレスポンスが返ってくることが確認できます。タブ上で上書きされた目標として紫色のツールチップが表示されます。Override」をオフにすることでオーバーライドを一時的に停止できます(再読み込みが必要です)。オーバーライドを完全に削除するにはその横にある🚫アイコンをクリックします。オーバーライド先がなくなるので、通常のレスポンスに戻ります。同様の紫のツールチップが表示されます)。利用できるものです)。補完が効き、いくらか編集しやすいはずです。相談時、「このデータパターンだとどうなりますか?」と質問を受けた際に、その場でさっとイメージを見せるのにも使えます。利用した方が速いはずです。起動することで、ページが編集可能になります。コンテンツ上書き四天王が揃いました。活用することで、さまざまな状況を確認できます。新機能をチェックしてみてください。https://developer.chrome.com/blog/new-in-devtools-121?hl=ja#overridesGitHubで編集を提案ikuma-t悠久のフロントエンドエンジニア見習いです。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。バッジを贈るDiscussionikuma-t悠久のフロントエンドエンジニア見習いです。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。