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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

仕組み

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

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

制限事項

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

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

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

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

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

  1. DevTools を開く、[Network] パネルに移動し、オーバーライドするリクエストを右クリックして、プルダウン メニューから [Override headers] または [Override content] を選択します。 リクエストの右クリック メニューからオーバーライド コンテンツを選択する。
  2. ローカル オーバーライドをまだ設定していない場合は、上部のアクションバーに次のプロンプトが表示されます。 <ph type="x-smartling-placeholder">
      </ph>
    1. オーバーライド ファイルを保存するフォルダを選択します。 フォルダを選択するよう求めるメッセージが表示されます。
    2. [Allow] をクリックして、DevTools にそのファイルへのアクセス権を与えます。 DevTools がアクセス権をリクエストします。
  3. ローカル オーバーライドを設定して無効にした場合、DevTools によって自動的に有効になります。

  4. ローカル オーバーライドを設定して有効にすると、オーバーライドする内容に応じて、DevTools で次の画面が表示されます。

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

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

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

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

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

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

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

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

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

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

[Response] タブの横にツールチップが表示された紫色のドットアイコン。

XHR をオーバーライドするかフェッチ リクエストをリモート リソースをモックする

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

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

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

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

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

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

[フォルダで開く] オプション。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    [レスポンス ヘッダー] セクションの横にある [ヘッダーのオーバーライド] リンク。

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

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

    .headers ファイルの編集。

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

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

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

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

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