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

Sofia Emelianova

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

ローカル オーバーライドを使用して、リモート リソースにアクセスできない場合でも、リモート リソースをモックします。リクエストやさまざまなファイル（HTTP レスポンス ヘッダー、ウェブ コンテンツ、XHR リクエストやフェッチ リクエストなど）のレスポンスをモックできます。

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

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

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

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

仕組み

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

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

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

制限事項

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

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

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

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

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

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

4. ローカル オーバーライドが設定され、有効になると、オーバーライドする内容に応じて、DevTools に次のいずれかが表示されます。

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

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

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

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

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

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

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

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

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

DevTools は、変更されたファイルを保存し、[ソース] > [オーバーライド] にリストします。また、オーバーライドされたファイルの横に、関連するパネルとペイン（[要素] > [スタイル]、[ネットワーク]、[ソース] > [オーバーライド]）に アイコンを表示します。

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

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

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

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

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

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

ウェブ コンテンツに加えたすべての変更は、[変更] ドロワータブで 1 か所で確認できます。

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

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

[ネットワーク] パネルでは、ウェブサーバーにアクセスしなくても HTTP レスポンス ヘッダーをオーバーライドできます。

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

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

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

1. ローカル オーバーライドを設定し、このデモページなどを確認します。
2. [ネットワーク] に移動し、リクエストを見つけて右クリックし、[ヘッダーをオーバーライド] を選択します。DevTools の [Headers] > [Response Headers] エディタに移動します。

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

   

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

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

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

   

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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