Webinhalts- und HTTP-Antwortheader lokal überschreiben

Sofia Emelianova

Mit lokalen Überschreibungen können Sie Ihren Workflow entsperren, indem Sie Änderungen und Fehlerbehebungen prototypisieren und testen, ohne auf die Unterstützung durch das Backend, Drittanbieter oder APIs warten zu müssen.

Mit lokalen Überschreibungen können Sie Remote-Ressourcen simulieren, auch wenn Sie keinen Zugriff darauf haben. Sie können Antworten auf Anfragen und verschiedene Dateien, z. B. HTTP-Antwortheader und Webinhalte, einschließlich XHR- und Fetch-Anfragen, simulieren.

Lokale Überschreibungen können beispielsweise in folgenden Anwendungsfällen hilfreich sein:

• API simulieren und API-Korrekturen testen, bevor sie in der Produktion eingesetzt werden
• Prototypen für neue UI-Designs erstellen, wenn Sie bereits die Datenstrukturen kennen, die das Backend verwenden wird.
• Testen Sie Leistungsverbesserungen, z. B. CLS-Eliminierung, um im Voraus sicherzustellen, dass sie signifikant sind.

Hinweis :Im Video oben finden Sie weitere Informationen zu Anwendungsfällen.

Mit lokalen Überschreibungen können Sie auch die Änderungen beibehalten, die Sie in den Entwicklertools vornehmen, wenn die Seite neu geladen wird.

Funktionsweise

• Wenn Sie Änderungen in den Entwicklertools vornehmen, wird eine Kopie der geänderten Datei in einem von Ihnen angegebenen Ordner gespeichert.
• Wenn Sie die Seite neu laden, stellen die Entwicklertools die lokale, geänderte Datei anstelle der Netzwerkressource bereit.

Hinweis :Durch lokale Überschreibungen wird der Cache automatisch deaktiviert.

Sie können Ihre Änderungen auch direkt in Quelldateien speichern. Weitere Informationen finden Sie unter Dateien mit Arbeitsbereichen bearbeiten und speichern.

Beschränkungen

Lokale Überschreibungen funktionieren für Netzwerkantwortheader und für die meisten Dateitypen, einschließlich XHR- und Fetch-Anfragen. Es gibt jedoch einige Ausnahmen:

• Der Cache ist deaktiviert, wenn Lokale Überschreibungen aktiviert sind.
• In DevTools werden Änderungen, die im DOM-Baum des Bereichs Elemente vorgenommen werden, nicht gespeichert.
• Wenn Sie CSS im Bereich Styles bearbeiten und die Quelle dieses CSS eine HTML-Datei ist, werden die Änderungen in DevTools nicht gespeichert.

Stattdessen können Sie HTML-Dateien im Bereich Quellcode bearbeiten.

Lokale Überschreibungen einrichten

Sie können Webinhalte oder Antwortheader direkt im Bereich Netzwerk überschreiben:

1. Entwicklertools öffnen, zum Bereich Netzwerk wechseln, mit der rechten Maustaste auf eine Anfrage klicken, die Sie überschreiben möchten, und im Drop-down-Menü Header überschreiben oder Inhalt überschreiben auswählen.
2. Wenn Sie noch keine lokalen Überschreibungen eingerichtet haben, werden Sie in der Aktionsleiste oben in DevTools aufgefordert, Folgendes zu tun:
   1. Wähle einen Ordner aus, in dem die überschriebenen Dateien gespeichert werden sollen.
   2. Klicken Sie auf Zulassen, um DevTools Zugriffsrechte zu erteilen.
3. Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie von DevTools automatisch aktiviert.

4. Sobald lokale Überschreibungen eingerichtet und aktiviert sind, werden Sie in den Entwicklertools je nachdem, was Sie überschreiben möchten, zu folgenden Bereichen weitergeleitet:

   • Im Bereich Quellen können Sie Änderungen an Webinhalten vornehmen.
   • Mit dem Editor unter Netzwerk > Header > Antwortheader können Sie Änderungen an Antwortheadern vornehmen.

Wenn Sie lokale Überschreibungen vorübergehend deaktivieren oder alle Überschreibungsdateien löschen möchten, gehen Sie zu Quellen > Überschreibungen und entfernen Sie das Häkchen aus dem Kästchen Lokale Überschreibungen aktivieren oder klicken Sie auf Löschen.

Wenn Sie eine einzelne Überschreibungsdatei oder alle Überschreibungen in einem Ordner löschen möchten, klicken Sie mit der rechten Maustaste auf die Datei oder den Ordner unter Quellen > Überschreibungen, wählen Sie Löschen aus und klicken Sie dann im Dialogfeld auf OK. Diese Aktion kann nicht rückgängig gemacht werden. Sie müssen die gelöschten Überschreibungen manuell neu erstellen.

Wenn Sie alle Überschreibungen schnell sehen möchten, klicken Sie im Bereich Netzwerk mit der rechten Maustaste auf eine Anfrage und wählen Sie Alle Überschreibungen anzeigen aus. In den Entwicklertools wird Quellen > Überschreibungen geöffnet.

Webinhalte überschreiben

So überschreiben Sie Webinhalte:

1. Lokale Überschreibungen einrichten
2. Änderungen an Dateien vornehmen und in DevTools speichern

Hinweis:Sie können source-mapped-Dateien nicht überschreiben. Wenn Sie im Bereich Netzwerk mit der rechten Maustaste auf eine Anfrage klicken und Inhalt überschreiben auswählen, wird in DevTools ein Dialogfeld angezeigt, in dem Sie zu den ursprünglichen Quelldateien weitergeleitet werden.

Sie können beispielsweise Dateien in Quellen oder CSS in Elemente > Stile bearbeiten, sofern sich das CSS nicht in HTML-Dateien befindet.

DevTools speichert die geänderten Dateien, listet sie unter Quellen > Überschreibungen auf und zeigt das Symbol  neben den überschriebenen Dateien in den entsprechenden Feldern und Bereichen an: Elemente > Stile, Netzwerk und Quellen > Überschreibungen.

Außerdem wird im Bereich Netzwerk neben dem Tab Antwort einer Anfrage mit überschriebenen Webinhalten ein lila Punkt mit einer Kurzinfo angezeigt.

XHR- oder Fetch-Anfragen überschreiben, um Remote-Ressourcen nachzuahmen

Mit lokalen Überschreibungen benötigen Sie keinen Zugriff auf das Backend und müssen nicht warten, bis Ihre Änderungen unterstützt werden. Schnell Prototypen erstellen und testen:

1. Lokale Überschreibungen einrichten
2. Filtern Sie in Network nach XHR/fetch-Anfragen, suchen Sie die gewünschte Anfrage, klicken Sie mit der rechten Maustaste darauf und wählen Sie Override content (Inhalt überschreiben) aus.
3. Nehmen Sie die gewünschten Änderungen an den abgerufenen Daten vor und speichern Sie die Datei.
4. Aktualisieren Sie die Seite, um die Änderungen zu sehen.

In diesem Video erfahren Sie mehr über diesen Workflow:

Lokale Änderungen nachverfolgen

Alle Änderungen, die Sie an Webinhalten vornehmen, können Sie an einem Ort nachverfolgen: auf dem Tab Änderungen.

Außerdem können Sie unter Quellen > Überschreibungen mit der rechten Maustaste auf die gespeicherte Datei klicken und im Kontextmenü Im übergeordneten Ordner öffnen auswählen. Dadurch wird der Ordner geöffnet, den Sie bei der Einrichtung von Überschreibungen ausgewählt haben. Dort können Sie die Dateien mit Ihrem bevorzugten Code-Editor bearbeiten.

HTTP-Antwortheader überschreiben

Im Bereich Netzwerk können Sie HTTP-Antwortheader überschreiben, ohne auf den Webserver zugreifen zu müssen.

Mit dem Überschreiben von Antwortheadern können Sie lokal Korrekturen für verschiedene Header prototypisieren, darunter:

• CORS-Header (Cross-Origin Resource Sharing)
• Permissions-Policy-Header
• Cross-Origin-Isolation-Header

So überschreiben Sie einen Antwortheader:

1. Lokale Überschreibungen einrichten und die Seite öffnen, auf der Sie Fehler beheben möchten.
2. Rufen Sie Network auf, suchen Sie eine Anfrage, klicken Sie mit der rechten Maustaste darauf und wählen Sie Override headers (Header überschreiben) aus. In DevTools wird der Editor Headers > Response Headers (Header > Antwortheader) geöffnet.

3. Bewegen Sie den Mauszeiger auf einen Antwortheaderwert und setzen Sie dort einen Cursor.

   

   Alternativ können Sie den Editor Antwortheader aktivieren, indem Sie den Mauszeiger auf einen Antwortheaderwert bewegen und auf Bearbeiten Bearbeiten klicken.

4. Bearbeiten Sie eine vorhandene Überschrift oder fügen Sie eine neue hinzu.

   Hinweis:In diesem Beispiel wird der Header Access-Control-Allow-Origin: * hinzugefügt, um einen CORS-Fehler zu beheben.

   

   • Klicken Sie auf einen Header-Wert, um ihn zu bearbeiten.
   • Wenn Sie einen neuen Header hinzufügen möchten, klicken Sie auf  Header hinzufügen.
   • Wenn Sie eine Überschriftenüberschreibung entfernen möchten, klicken Sie daneben auf . Dadurch werden die von Ihnen hinzugefügten Headern entfernt oder geänderte Werte auf die ursprünglichen Werte zurückgesetzt.

   Im Bereich Netzwerk werden geänderte Header grün und entfernte Überschreibungen rot und durchgestrichen hervorgehoben. Außerdem wird auf dem Tab Kopfzeilen ein lila Punkt mit einer Kurzinfo angezeigt, um Sie darauf hinzuweisen, dass Kopfzeilen überschrieben werden.

5.  Aktualisieren Sie die Seite, um die Änderungen zu übernehmen.

Alle Überschreibungen für Antwortheader bearbeiten

So bearbeiten Sie alle Header-Überschreibungen an einem Ort:

1. Klicken Sie neben dem Bereich Response Headers auf .headers.

   

   In den DevTools wird die entsprechende .headers-Datei unter Quellen > Überschreibungen geöffnet.

2. Bearbeiten Sie die Datei .headers.

   

   • Wenn Sie eine neue Überschreibungsregel hinzufügen möchten, klicken Sie auf Überschreibungsregel hinzufügen. Eine Regel besteht aus einer Reihe von Headern und Werten sowie einer oder mehreren Anfragen, auf die sie angewendet werden soll.

     Hinweis:Sie können Platzhalter verwenden, um mehrere Anfragen gleichzeitig anzugeben. Mehrere Zeichen werden mit * und ein einzelnes Zeichen mit ? angegeben.

   • Wenn Sie einer Regel ein Header-Wert-Paar hinzufügen möchten, bewegen Sie den Mauszeiger auf ein anderes Paar und klicken Sie auf .

   • Wenn Sie einen Header-Wert zurücksetzen, einen hinzugefügten Header oder eine Regel entfernen möchten, bewegen Sie den Mauszeiger darauf und klicken Sie auf .

3. Speichern Sie die Datei .headers mit Befehlstaste / Strg + S.

4.  Aktualisieren Sie die Seite, um die Änderungen zu übernehmen.