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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

たとえば、ローカル オーバーライドは次のような場合に役立ちます。

  • 本番環境に移行する前に、API の修正をモックしてテストします。
  • バックエンドで使用するデータ構造がわかっている場合は、新しい UI デザインをプロトタイピングします。
  • パフォーマンスの修正（CLS の排除など）をテストして、重要性が前もって確認します。

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

仕組み

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

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

制限事項

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[ソース]、[ネットワーク]、[要素]、および [スタイル] でオーバーライドされたファイルの横にある対応するアイコン

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

[回答] タブの横にツールチップが表示されている、紫色のドットアイコン。

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

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

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

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

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

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

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

[含まれるフォルダで開く] オプション。

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

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

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

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

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

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

    レスポンス ヘッダー エディタ。

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

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

    既存のヘッダー値の変更、新しいヘッダー値の追加、オーバーライドの削除。

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

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

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

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

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

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

    [Response Headers] セクションの横にある [Header overrides] リンク。

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

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

    .headers ファイルの編集

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

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

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

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

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