ウェブ コンテンツと HTTP レスポンス ヘッダーをローカルでオーバーライドする

Sofia Emelianova

ローカル オーバーライドを使用すると、バックエンド、サードパーティ、API が変更や修正をサポートするのを待たずに、プロトタイプを作成してテストすることで、ワークフローのブロックを解除できます。

ローカル オーバーライドを使用すると、リモート リソースにアクセスできない場合でも、そのリソースをモックできます。HTTP レスポンス ヘッダーや ウェブ コンテンツなど、リクエストやさまざまなファイルに対するレスポンスをモックできます。これには、XHR リクエストと fetch リクエストも含まれます。

たとえば、ローカル オーバーライドは次のようなユースケースで役立ちます。

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

注: ユースケースについて詳しくは、上記の動画をご覧ください。

ローカル オーバーライドを使用すると、DevTools で行った変更をページ読み込み後も保持できます。

仕組み

• DevTools で変更を行うと、変更されたファイルのコピーが指定したフォルダに保存されます。
• ページを再読み込みすると、DevTools はネットワーク リソースではなく、ローカルの変更されたファイルを配信します。

注: ローカル オーバーライドでは、キャッシュが自動的に無効になります。

変更をソースファイルに直接保存することもできます。ワークスペースでファイルを編集して保存するをご覧ください。

制限事項

ローカル オーバーライドは、ネットワーク レスポンス ヘッダーと、XHR リクエストや fetch リクエストを含むほとんどのファイル形式で機能します。ただし、次の 2 つの例外があります。

• ローカルのオーバーライドが有効になっている場合、キャッシュは無効になります。
• DevTools では、[要素] パネルの DOM ツリーで行った変更は保存されません。
• [スタイル] ペインで CSS を編集し、その CSS のソースが HTML ファイルである場合、DevTools は変更を保存しません。

代わりに、[ソース] パネルで HTML ファイルを編集できます。

ローカル オーバーライドを設定する

[ネットワーク] パネルで、ウェブ コンテンツまたはレスポンス ヘッダーをすぐにオーバーライドできます。

1. DevTools を開いて、[ネットワーク] パネルに移動し、オーバーライドするリクエストを右クリックして、プルダウン メニューから [ヘッダーをオーバーライド] または [コンテンツをオーバーライド] を選択します。
2. ローカル オーバーライドをまだ設定していない場合は、上部のアクションバーに次のメッセージが表示されます。
   1. オーバーライド ファイルを保存するフォルダを選択します。
   2. [許可] をクリックして、DevTools のアクセス権を付与します。
3. ローカル オーバーライドが設定されているが、無効になっている場合、DevTools は自動的にローカル オーバーライドを有効にします。

4. ローカル オーバーライドを設定して有効にすると、オーバーライドする内容に応じて、DevTools は次の場所に移動します。

   • ソースパネル: ウェブ コンテンツを変更できます。
   • [ネットワーク] > [ヘッダー] > [レスポンス ヘッダー] のエディタで、レスポンス ヘッダーを変更できます。

ローカル オーバーライドを一時的に無効にするか、すべてのオーバーライド ファイルを削除するには、[ソース] > [オーバーライド] に移動し、 [ローカル オーバーライドを有効にする] チェックボックスをオフにするか、 [クリア] をクリックします。

1 つのオーバーライド ファイルまたはフォルダ内のすべてのオーバーライドを削除するには、[ソース] > [オーバーライド] でファイルまたはフォルダを右クリックし、[削除] を選択して、ダイアログで [OK] をクリックします。この操作は元に戻せません。削除したオーバーライドは手動で再作成する必要があります。

すべてのオーバーライドをすばやく確認するには、[ネットワーク] パネルでリクエストを右クリックし、[すべてのオーバーライドを表示] を選択します。DevTools で [Sources] > [Overrides] に移動します。

ウェブ コンテンツをオーバーライドする

ウェブ コンテンツをオーバーライドするには:

1. ローカル オーバーライドを設定する。
2. ファイルを変更して、DevTools に保存します。

注: ソースマップ ファイルはオーバーライドできません。[ネットワーク] パネルでリクエストを右クリックして [コンテンツをオーバーライド] を選択すると、DevTools には、元のソースファイルに移動するダイアログが表示されます。

たとえば、CSS が HTML ファイルに存在する場合を除き、[ソース] のファイルや、[要素] > [スタイル] の CSS を編集できます。

DevTools は、変更されたファイルを保存し、[Sources] > [Overrides] に一覧表示します。また、関連するパネルとペイン（[Elements] > [Styles]、[Network]、[Sources] > [Overrides]）で、オーバーライドされたファイルの横に アイコンを表示します。

また、ネットワーク パネルには、オーバーライドされたウェブ コンテンツを含むリクエストの [レスポンス] タブの横に、ツールチップ付きの紫色のドット アイコンが表示されます。

XHR リクエストまたは fetch リクエストをオーバーライドしてリモート リソースをモックする

ローカル オーバーライドを使用すると、バックエンドにアクセスする必要がなく、変更がサポートされるまで待つ必要もありません。その場でモックとテストを行う:

1. ローカル オーバーライドを設定する。
2. [ネットワーク] で、XHR/fetch リクエストをフィルタして、必要なリクエストを見つけ、右クリックして [コンテンツをオーバーライド] を選択します。
3. 取得したデータに変更を加え、ファイルを保存します。
4. ページを更新し、変更が適用されていることを確認します。

このワークフローについては、次の動画をご覧ください。

ローカルでの変更を追跡する

ウェブ コンテンツに加えた変更はすべて、[変更] ドロワー タブで一元管理できます。

また、[ソース] > [オーバーライド] で、保存したファイルを右クリックして、コンテキスト メニューから [フォルダを開く] を選択することもできます。オーバーライドの設定時に選択したフォルダが開きます。ここで、任意のコードエディタを使用してファイルを変更できます。

HTTP レスポンス ヘッダーをオーバーライドする

ネットワーク パネルでは、ウェブサーバーにアクセスせずに HTTP レスポンス ヘッダーをオーバーライドできます。

レスポンス ヘッダーのオーバーライドを使用すると、次のようなさまざまなヘッダーの修正をローカルでプロトタイプ化できます。

• クロスオリジン リソース シェアリング（CORS）ヘッダー
• Permissions-Policy ヘッダー
• クロスオリジン分離ヘッダー

レスポンス ヘッダーをオーバーライドするには:

1. ローカル オーバーライドを設定して、デバッグするページを開きます。
2. [ネットワーク] に移動してリクエストを見つけ、右クリックして [ヘッダーをオーバーライド] を選択します。DevTools で [ヘッダー] > [レスポンス ヘッダー] エディタに移動します。

3. レスポンス ヘッダー値にカーソルを合わせ、カーソルを置きます。

   

   または、[レスポンス ヘッダー] エディタを有効にするには、レスポンス ヘッダーの値にカーソルを合わせて、編集アイコン 編集をクリックします。

4. ヘッダーを変更または追加します。

   注: この例では、CORS エラーを回避するために Access-Control-Allow-Origin: * ヘッダーを追加しています。

   

   • ヘッダー値を編集するには、そのヘッダー値をクリックします。
   • 新しいヘッダーを追加するには、 [ヘッダーを追加] をクリックします。
   • ヘッダーのオーバーライドを削除するには、その横にある をクリックします。これにより、追加したヘッダーが削除され、変更した値が元の値に戻ります。

   [ネットワーク] パネルでは、変更されたヘッダーは緑色でハイライト表示され、削除されたオーバーライドは赤色で取り消し線付きで表示されます。また、[ヘッダー] タブには、ヘッダーがオーバーライドされていることを示す紫色のドット アイコンとツールチップが表示されます。

5. ページを更新して変更を適用します。

すべてのレスポンス ヘッダーのオーバーライドを編集する

すべてのヘッダーのオーバーライドを 1 か所で編集するには:

1. [レスポンス ヘッダー] セクションの横にある .headers をクリックします。

   

   DevTools で、[Sources] > [Overrides] の対応する .headers ファイルに移動します。

2. .headers ファイルを編集します。

   

   • 新しいオーバーライド ルールを追加するには、[オーバーライド ルールを追加] をクリックします。ここでのルールは、ヘッダーと値のセットと、それらを適用する 1 つまたは複数のリクエストです。

     注: ワイルドカードを使用すると、複数のリクエストを一度に指定できます。複数の文字を指定するには * を、1 つの文字を指定するには ? を使用します。

   • ルールにヘッダーと値のペアを追加するには、別のペアにカーソルを合わせて をクリックします。

   • ヘッダー値を元に戻すには、追加したヘッダーまたはルールを削除します。ヘッダーまたはルールにカーソルを合わせて をクリックします。

3. Command / Control + S キーを押して、.headers ファイルを保存します。

4. ページを更新して変更を適用します。