Webinhalts- und HTTP-Antwortheader lokal überschreiben

Sofia Emelianova

Mit lokalen Überschreibungen können Sie HTTP-Antwortheader und Webinhalte, einschließlich XHR- und Abrufanfragen, überschreiben, um Remote-Ressourcen zu simulieren, auch wenn Sie keinen Zugriff darauf haben. So können Sie Prototypen für Änderungen erstellen, ohne darauf warten zu müssen, dass das Back-End sie unterstützt. Mit lokalen Überschreibungen kannst du auch die Änderungen, die du in den Entwicklertools vornimmst, beim Seitenaufbau beibehalten.

So gehts:

• Wenn du Änderungen in den Entwicklertools vornimmst, wird eine Kopie der geänderten Datei in einem von dir angegebenen Ordner gespeichert.
• Wenn du die Seite aktualisierst, wird über die Entwicklertools die lokale, geänderte Datei und nicht die Netzwerkressource bereitgestellt.

Beschränkungen

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

• Der Cache ist deaktiviert, wenn lokale Überschreibungen aktiviert sind.
• In den Entwicklertools werden Änderungen, die in der DOM-Baumstruktur im Bereich Elemente vorgenommen wurden, nicht gespeichert.
• Wenn Sie CSS im Bereich Styles bearbeiten und die Quelle dieses CSS-Codes eine HTML-Datei ist, speichern die Entwicklertools die Änderung nicht.

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. Öffne die Entwicklertools, gehe zum Bereich Netzwerk, klicke mit der rechten Maustaste auf eine Anfrage, die du überschreiben möchtest, und wähle im Drop-down-Menü Header überschreiben oder Inhalt überschreiben aus.
2. Wenn Sie noch keine lokalen Überschreibungen eingerichtet haben, werden Sie von den Entwicklertools in der Aktionsleiste oben aufgefordert, Folgendes zu tun:
   1. Wählen Sie einen Ordner aus, in dem die Überschreibungsdateien gespeichert werden sollen.
   2. Klicke auf Zulassen, um den Entwicklertools Zugriffsrechte dafür zu gewähren.
3. Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie von den Entwicklertools automatisch aktiviert.

4. Sobald die lokalen Überschreibungen eingerichtet und aktiviert sind, gibt es in den Entwicklertools folgende Möglichkeiten:

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

Um lokale Überschreibungen vorübergehend zu deaktivieren oder alle Überschreibungsdateien zu löschen, gehen Sie zu Quellen > Überschreibungen und deaktivieren Sie das 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 > Überschreibungen mit der rechten Maustaste auf die Datei oder den Ordner, wählen Sie Löschen aus und klicken Sie dann im Dialogfeld auf OK. Diese Aktion kann nicht rückgängig gemacht werden und Sie müssen die gelöschten Überschreibungen manuell neu erstellen.

Wenn Sie schnell alle Überschreibungen sehen möchten, klicken Sie im Steuerfeld Netzwerk mit der rechten Maustaste auf eine Anfrage und wählen Sie Alle Überschreibungen anzeigen aus. Die Entwicklertools führen Sie zu Quellen > Überschreibungen.

Webinhalte überschreiben

So überschreiben Sie Webinhalte:

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

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

Die Entwicklertools speichern die geänderten Dateien, führen sie unter Quellen > Überschreibungen auf und zeigen das Symbol neben den überschriebenen Dateien in den entsprechenden Bereichen 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 Abrufanfragen überschreiben, um Remote-Ressourcen zu simulieren

Bei lokalen Überschreibungen benötigen Sie keinen Zugriff auf das Backend und müssen nicht warten, bis es Ihre Änderungen unterstützt. Probieren Sie verschiedene Funktionen aus:

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 sehen Sie nach, wie die Änderungen übernommen wurden.

Weitere Informationen zu diesem Workflow erhalten Sie im folgenden Video:

Lokale Änderungen verfolgen

Sie können alle Änderungen, die Sie an Webinhalten vornehmen, an einem zentralen Ort im Auge behalten – auf dem Tab Änderungen in der Leiste.

HTTP-Antwortheader überschreiben

Im Steuerfeld Netzwerk können Sie HTTP-Antwortheader ohne Zugriff auf den Webserver überschreiben.

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

• CORS-Header (Cross-Origin Resource Sharing)
• Überschriften für Richtlinie für Berechtigungen
• Header zur ursprungsübergreifenden Isolierung

So überschreiben Sie einen Antwortheader:

1. Richten Sie lokale Überschreibungen ein und prüfen Sie beispielsweise diese Demoseite.
2. Klicken Sie unter Netzwerk mit der rechten Maustaste auf eine Anfrage und wählen Sie Header überschreiben aus. In den Entwicklertools gelangst du zum Editor Headers > Response Headers.

3. Bewegen Sie den Mauszeiger auf einen Antwortheader-Wert und platzieren Sie einen Cursor dort.

   

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

4. Ändern Sie die Überschrift oder fügen Sie eine neue hinzu.

   

   • Klicken Sie auf einen Headerwert, um ihn zu bearbeiten.
   • Wenn Sie eine neue Kopfzeile hinzufügen möchten, klicken Sie auf add Kopfzeile hinzufügen.
   • Wenn Sie eine Header-Überschreibung entfernen möchten, klicken Sie daneben auf delete. Dadurch werden die von Ihnen hinzugefügten Header 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. Darüber hinaus wird auf dem Tab Headers ein lila Punktsymbol mit einer Kurzinfo angezeigt, die darauf hinweist, dass Überschriften überschrieben werden.

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

Alle Überschreibungen von Antwortheadern bearbeiten

So bearbeiten Sie alle Überschreibungen von Kopfzeilen an einem Ort:

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

   

   Die Entwicklertools führen Sie zur entsprechenden .headers-Datei unter Quellen > Überschreibungen.

2. Bearbeiten Sie die Datei .headers.

   

   • Klicken Sie auf Überschreibungsregel hinzufügen, um eine neue Überschreibungsregel hinzuzufügen. Eine Regel besteht aus einer Reihe von Headern und Werten sowie einer einzelnen oder mehreren Anfragen, auf die sie angewendet werden sollen.

   • Wenn Sie einer Regel ein Header/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 den Mauszeiger darauf und klicken Sie auf delete.

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

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