Webinhalts- und HTTP-Antwortheader lokal überschreiben

Mit lokalen Überschreibungen können Sie Ihren Workflow entsperren, indem Sie Änderungen und Fehler 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 simulieren, z. B. auf HTTP-Antwortheader und Webinhalte, einschließlich XHR- und Abrufanfragen.

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

• API-Korrekturen simulieren und API-Fehler testen, bevor sie tatsächlich in der Produktion verwendet werden.
• Erstellen Sie Prototypen für neue UI-Designs, wenn Sie bereits wissen, welche Datenstrukturen das Backend verwenden wird.
• Teste Leistungsverbesserungen, z. B. eliminiere CLS, um vorab sicherzustellen, dass sie signifikant sind.

Mit lokalen Überschreibungen können Sie außerdem die in den Entwicklertools vorgenommenen Änderungen beim Seitenaufbau beibehalten.

Funktionsweise

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

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

Beschränkungen

Lokale Überschreibungen funktionieren mit einigen Ausnahmen für Netzwerkantwortheader und die meisten Dateitypen, einschließlich XHR- und Abrufanfragen:

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

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

Lokale Überschreibungen einrichten

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

1. Öffnen Sie die Entwicklertools, gehen Sie zum Bereich Netzwerk, klicken Sie mit der rechten Maustaste auf eine Anfrage, die Sie überschreiben möchten, und wählen Sie im Drop-down-Menü Header überschreiben oder Inhalt überschreiben aus.
2. Wenn Sie noch keine lokalen Überschreibungen eingerichtet haben, werden Sie in der Aktionsleiste oben in Entwicklertools aufgefordert:
   1. Wählen Sie einen Ordner aus, in dem die Überschreibungsdateien gespeichert werden sollen.
   2. Klicken Sie auf Zulassen, um den Entwicklertools Zugriffsberechtigungen zu gewähren.
3. Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie von den Entwicklertools automatisch aktiviert.

4. Nachdem lokale Überschreibungen eingerichtet und aktiviert wurden, werden Sie in den DevTools je nach dem, was Sie überschreiben möchten, zu folgenden Elementen weitergeleitet:

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

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

Um eine einzelne Überschreibungsdatei oder alle Überschreibungen in einem Ordner zu löschen, klicken Sie unter Quellen mit der rechten Maustaste auf die Datei oder den Ordner. Überschreibungen: Wählen Sie Löschen aus und klicken Sie 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 aufrufen möchten, klicken Sie im Bereich Netzwerk mit der rechten Maustaste auf eine Anfrage und wählen Sie Alle Überschreibungen anzeigen aus. Über die Entwicklertools gelangen Sie zu Quellen > Überschreibungen:

Webinhalte überschreiben

So überschreiben Sie Webinhalte:

1. Richten Sie lokale Überschreibungen ein.
2. Nehmen Sie Änderungen an Dateien vor und speichern Sie sie in den Entwicklertools.

Sie können beispielsweise Dateien unter Quellen oder CSS unter Elemente > Stile bearbeiten, es sei denn, das CSS befindet sich in HTML-Dateien.

Die geänderten Dateien werden in den Entwicklertools gespeichert und unter Quellen > Überschreibt. Neben den überschriebenen Dateien in den relevanten Bereichen und Bereichen wird das Symbol angezeigt: Elemente > Styles, Network und Sources > Überschreibungen:

Außerdem wird im Bereich Netzwerk neben dem Tab Antwort einer Anfrage mit überschriebenem Webcontent ein lilafarbenes Punktsymbol mit einer Kurzinfo angezeigt.

XHR- oder Abrufanfragen überschreiben, um Remote-Ressourcen nachzuahmen

Mit lokalen Überschreibungen benötigen Sie keinen Zugriff auf das Backend und müssen nicht warten, bis es Ihre Änderungen unterstützt. So kannst du spontan experimentieren und experimentieren:

1. Richten Sie lokale Überschreibungen ein.
2. Filtern Sie unter Netzwerk nach XHR/fetch-Anfragen, suchen Sie die gewünschte, klicken Sie mit der rechten Maustaste darauf und wählen Sie Inhalt überschreiben aus.
3. Nehmen Sie die gewünschten Änderungen an den abgerufenen Daten vor und speichern Sie die Datei.
4. refresh Aktualisieren Sie die Seite und beobachten Sie, wie die Änderungen angewendet wurden.

Sehen Sie sich das folgende Video an, um mehr über diesen Workflow zu erfahren:

Lokale Änderungen verfolgen

Sie können alle Änderungen, die Sie an Webinhalten vornehmen, an einem Ort verfolgen: 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 beim Einrichten der Überschreibungen ausgewählt haben. Dort können Sie die Dateien mit Ihrem bevorzugten Code-Editor ändern.

HTTP-Antwortheader überschreiben

Im Bereich Netzwerk können Sie HTTP-Antwortheader überschreiben, ohne Zugriff auf den Webserver zu haben.

Mit Überschreibungen von Antwortheadern können Sie lokale Fehlerkorrekturen für verschiedene Header erstellen, einschließlich, aber nicht beschränkt auf:

• CORS-Header (Cross-Origin Resource Sharing)
• Header für Berechtigungsrichtlinien
• Cross-Origin-Isolation-Header

So überschreiben Sie einen Antwortheader:

1. Richten Sie lokale Überschreibungen ein und sehen Sie sich beispielsweise diese Demoseite an.
2. Rufen Sie Netzwerk auf, suchen Sie eine Anfrage, klicken Sie mit der rechten Maustaste darauf und wählen Sie Header überschreiben aus. In den Entwicklertools gelangen Sie zu den Headers > Response Headers-Editor zur Verfügung.

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

   

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

4. Ändern Sie eine Kopfzeile oder fügen Sie eine neue hinzu.

   

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

   Im Bereich Netzwerk werden geänderte Header in Grün und entfernte Überschreibungen rot und durchgestrichen hervorgehoben. Darüber hinaus wird auf dem Tab Headers ein lila Punktsymbol mit einer Kurzinfo angezeigt, die Sie darüber informiert, dass Header überschrieben werden.

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

Alle Antwortheader-Überschreibungen bearbeiten

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

1. Klicken Sie neben dem Bereich Antwortheader auf  .headers.

   

   In den Entwicklertools gelangen Sie zur entsprechenden .headers-Datei unter Quellen > Überschreibungen:

2. Bearbeiten Sie die Datei .headers.

   

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

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

   • Wenn Sie einen Headerwert zurücksetzen möchten, entfernen Sie einen hinzugefügten Header oder eine Regel. Bewegen Sie dazu den Mauszeiger darauf und klicken Sie auf delete.

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

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