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

Sofia Emelianova

ローカル オーバーライドを使用すると、HTTP レスポンス ヘッダーとウェブ コンテンツ（XHR やフェッチ リクエストなど）をオーバーライドして、アクセス権がない場合でもリモート リソースをモックできます。これにより、バックエンドで変更がサポートされるのを待たずに変更のプロトタイプを作成できます。ローカル オーバーライドを使用すると、DevTools で行った変更をページ読み込み後も保持できます。

仕組み:

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

制限事項

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

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

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

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

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

1. DevTools を開いて、[Network] パネルに移動し、オーバーライドするリクエストを右クリックして、プルダウン メニューから [Override header] または [Override content] を選択します。
2. ローカル オーバーライドをまだ設定していない場合は、上部のアクションバーで次の操作を行うよう求められます。
   1. オーバーライド ファイルを保存するフォルダを選択します。
   2. [Allow] をクリックして DevTools へのアクセスを許可します。
3. ローカル オーバーライドを設定して無効にした場合、DevTools は自動的にそれらを有効にします。

4. ローカル オーバーライドを設定して有効にすると、オーバーライドする内容に応じて、DevTools で次の処理が行われます。

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

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

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

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

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

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

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

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

DevTools により、変更されたファイルが保存され、[ソース] > [オーバーライド] に一覧表示されます。また、[要素] > [スタイル]、[ネットワーク]、[ソース] > [オーバーライド] で、オーバーライドされたファイルの横に アイコンが表示されます。

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

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

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

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

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

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

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

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

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

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

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

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

1. ローカル オーバーライドを設定して、検証します（こちらのデモページなど）。
2. [ネットワーク] に移動し、リクエストを見つけて右クリックし、[オーバーライド ヘッダー] を選択します。[Headers] > [Response Headers] エディタが表示されます。

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

   

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

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

   

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

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

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

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

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

1. [Response Headers] セクションの横にある [.headers] をクリックします。

   

   DevTools の [ソース] > [オーバーライド] で、対応する .headers ファイルが表示されます。

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

   

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

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

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

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

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