Webinhalts- und HTTP-Antwortheader lokal überschreiben

Sofia Emelianova
Sofia Emelianova

Mit lokalen Überschreibungen können Sie die Blockierung Ihres Workflows aufheben, indem Sie Prototypen erstellen und Änderungen und Fehlerbehebungen testen, ohne darauf warten zu müssen, dass das Backend, Drittanbieter oder APIs sie unterstützen.

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

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

  • Mock API und teste API-Fehlerbehebungen, bevor sie tatsächlich in die Produktion gehen.
  • Erstellen Sie Prototypen für neue UI-Designs, wenn Sie bereits die Datenstrukturen kennen, die das Backend verwenden wird.
  • Testen Sie Leistungskorrekturen, z. B. beseitigen Sie CLS, um im Voraus sicherzustellen, dass sie relevant sind.

Mit lokalen Überschreibungen kannst du auch die Änderungen, die du in den Entwicklertools vornimmst, beim Seitenaufbau beibehalten.

Funktionsweise

  • 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.

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

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. Auswahl von Überschreibungsinhalten im Kontextmenü einer Anfrage.
  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. Die Entwicklertools fordern dich auf, einen Ordner auszuwählen.
    2. Klicke auf Zulassen, um den Entwicklertools Zugriffsrechte dafür zu gewähren. Die Entwicklertools fordert Zugriff an.
  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 Lokale Überschreibungen aktivieren oder klicken Sie auf 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 Gespeichert. neben den überschriebenen Dateien in den entsprechenden Bereichen und Bereichen an: Elemente > Stile, Netzwerk und Quellen > Überschreibungen.

Die entsprechenden Symbole neben den überschriebenen Dateien unter „Quellen“, „Netzwerk“, „Elemente“ und „Stile“

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

Das lilafarbene Punktsymbol mit einer Kurzinfo neben dem Tab „Response“ (Antworten).

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. 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.

Außerdem können Sie unter Quellen > Überschreibungen mit der rechten Maustaste auf die gespeicherte Datei klicken und im Kontextmenü In enthaltenem Ordner öffnen auswählen. Der Ordner wird geöffnet, den Sie beim overrides setup ausgewählt haben. Dort können Sie die Dateien mit Ihrem bevorzugten Code-Editor ändern.

Die Option „In enthaltenem Ordner öffnen“.

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:

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.

    Der Editor für Antwortheader.

    Sie können auch den Editor für Antwortheader aktivieren, indem Sie den Mauszeiger auf einen Antwortheaderwert bewegen und auf edit (Bearbeiten) Edit (Bearbeiten) klicken.

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

    Einen vorhandenen Headerwert ändern, einen neuen hinzufügen und eine Überschreibung entfernen.

    • Klicken Sie auf einen Headerwert, um ihn zu bearbeiten.
    • Wenn Sie eine neue Kopfzeile hinzufügen möchten, klicken Sie auf Kopfzeile hinzufügen.
    • Wenn Sie eine Header-Überschreibung entfernen möchten, klicken Sie daneben auf . 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. 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 Gespeichert. .headers.

    Der Link „Header überschreibt“ neben dem Abschnitt „Response Headers“.

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

  2. Bearbeiten Sie die Datei .headers.

    Bearbeiten der .headers-Datei

    • 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 .

    • 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 .

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

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