Sie bearbeiten CSS auf einer Live-Website, wechseln auf eine andere Seite, und alle Änderungen sind verschwunden. Frustrierend? Absolut. Das Elements-Panel in Chrome DevTools eignet sich hervorragend für schnelle Anpassungen an Styles und Markup, doch bis vor Kurzem hielten alle Experimente genau bis zum ersten F5. Und für das Testen einer Hypothese zurück zum Code-Editor zu gehen, neu zu bauen und erneut bereitzustellen, ist eine Zeitverschwendung, die niemandem Freude bereitet.

Glücklicherweise verfügt Chrome über einen eingebauten Mechanismus, der dieses Problem löst. Er heißt Local Overrides und ermöglicht es Ihnen, Änderungen lokal zu speichern, sodass der Browser sie auch nach einem Seiten-Reload anwendet. Die Funktion wurde bereits mit Chrome 65 eingeführt, hat aber im Laufe der Jahre neue Fähigkeiten erhalten: Mittlerweile können Sie nicht nur Dateien, sondern auch HTTP-Response-Header überschreiben und API-Anfragen direkt aus dem Browser mocken.

In diesem Leitfaden, von der Aktivierung bis zur Nachverfolgung von Bearbeitungen: alles, was ein Entwickler für produktives Arbeiten mit Local Overrides benötigt.

💡 Kurzüberblick:

• Aktivieren Sie Local Overrides im Sources-Tab und wählen Sie einen Ordner für die überschriebenen Dateien.
• Bearbeiten Sie CSS, JS oder HTML im Sources-Tab, Änderungen werden automatisch lokal gespeichert.
• Aktualisieren Sie die Seite oder navigieren Sie zu einer anderen, Chrome wendet Ihre Bearbeitungen weiterhin an.
• Verfolgen Sie Diff-Änderungen im Changes-Tab und verwalten Sie Dateien über Overrides.

So aktivieren Sie Local Overrides

Öffnen Sie die DevTools (F12 oder Ctrl+Shift+I) und wechseln Sie zum Sources-Tab. Im linken Bereich des Panels finden Sie den Overrides-Tab. Falls er nicht sichtbar ist, klicken Sie auf das >>-Symbol, um ausgeblendete Tabs anzuzeigen.

Klicken Sie auf die Schaltfläche Select folder for overrides. Chrome fordert die Berechtigung für den Zugriff auf das Dateisystem an, wählen Sie einen vorhandenen Ordner oder legen Sie einen neuen an. Hier werden alle überschriebenen Dateien gespeichert.

Nach der Auswahl des Ordners wird das Kontrollkästchen Enable Local Overrides automatisch aktiviert. Beachten Sie: Im Network-Tab erscheint ein Warnsymbol, das signalisiert, dass einige Netzwerkanfragen abgefangen und durch lokale Dateiversionen ersetzt werden können. Das ist normal und bedeutet, dass Overrides aktiv sind.

So nehmen und speichern Sie Änderungen

Nun zum interessanten Teil, dem Bearbeiten. Öffnen Sie eine beliebige Datei über den Sources-Tab: Suchen Sie das benötigte CSS oder JavaScript im Dateibaum links und doppelklicken Sie. Nehmen Sie Bearbeitungen vor und drücken Sie Ctrl+S, die Datei wird in Ihrem lokalen Ordner gespeichert und Chrome beginnt, die lokale Version anstelle der Server-Version zu verwenden.

Wichtige Nuance: Bearbeiten Sie Markup speziell im Sources-Tab, nicht in Elements. Das Elements-Panel ist praktisch für die visuelle Arbeit mit dem DOM, aber dort vorgenommene HTML-Änderungen werden nicht als Local Overrides gespeichert. Wechseln Sie zu Sources, suchen Sie die entsprechende HTML-Datei und bearbeiten Sie sie dort, ein violetter Punkt neben dem Dateinamen bestätigt, dass die Datei überschrieben ist.

Aktualisieren Sie die Seite oder navigieren Sie zu einer anderen, Chrome wird Ihre Bearbeitungen weiterhin anwenden. Möchten Sie das Original wiederherstellen? Löschen Sie die Datei aus dem Overrides-Ordner oder deaktivieren Sie Enable Local Overrides.

Gesondert erwähnenswert ist das Überschreiben von HTTP-Headern, eine Funktion, die in späteren Chrome-Versionen hinzugefügt wurde. Gehen Sie zum Network-Tab, klicken Sie mit der rechten Maustaste auf eine Anfrage und wählen Sie Override headers. Chrome erstellt eine .headers-Datei in Ihrem lokalen Ordner, in der Sie benutzerdefinierte Response-Header festlegen können. Dies ist von unschätzbarem Wert für das Testen von CORS-Richtlinien, Content-Security-Policy und Caching ohne Server-Änderungen.

So verfolgen Sie vorgenommene Änderungen

Wenn Sie aktiv Dutzende von Dateien überschreiben, vergisst man leicht, was genau wo geändert wurde. Dafür bietet DevTools zwei nützliche Werkzeuge.

Der Overrides-Tab (im Sources-Panel) zeigt eine vollständige Liste der überschriebenen Dateien, gruppiert nach Domains. Von hier aus können Sie jede Datei zur weiteren Bearbeitung öffnen oder ein nicht mehr benötigtes Override löschen, Rechtsklick → Delete.

Der Changes-Tab befindet sich im unteren Teil der DevTools, neben dem Console-Tab. Er zeigt den Diff zwischen der Originaldatei und Ihrer lokalen Version, Zeile für Zeile, ähnlich wie bei Git. Praktisch für ein schnelles Audit: was genau Sie in jeder Datei geändert haben und wie stark die Änderungen vom Original abweichen.

Kurzer Tipp: Erstellen Sie vor Refactoring oder Experimenten auf einer Live-Site einen Snapshot der Änderungen über Changes, das ist Ihr lokaler „Commit", zu dem Sie jederzeit zurückkehren können.

Overrides als Werkzeug für Performance-Tests

Neben komfortablem Prototyping eröffnen Local Overrides ein interessantes Szenario für die Performance-Analyse. Sie haben die Möglichkeit, Code auf einer nicht-lokalen Seite zu ändern und sofort die Auswirkungen dieser Änderungen auf die Ladegeschwindigkeit und das Rendering zu messen.

Beispielsweise vermuten Sie, dass ein Drittanbieter-Analytics-Skript das Rendering des ersten Bildschirms verlangsamt. Überschreiben Sie die Anfrage, ersetzen Sie das Originalskript durch eine leere Datei oder eine verzögerte Version und führen Sie Lighthouse aus. Der Unterschied in den Metriken zeigt klar, ob die Optimierung gerechtfertigt ist.

Ein weiteres Szenario: Schriften. Überschreiben Sie die CSS-Datei, entfernen Sie @font-face für eine benutzerdefinierte Schriftart und sehen Sie, wie stark sich der LCP (Largest Contentful Paint) verändert. Oder experimentieren Sie mit der Ladereihenfolge von Skripten, verschieben Sie kritisches JS aus dem <head> ans Ende des <body> und vergleichen Sie die Metriken.

Harry Roberts und Umar Hansa, bekannte Web-Performance-Experten, haben Screencasts mit anschaulichen Beispielen für diesen Ansatz veröffentlicht. Ihre Demonstrationen zeigen: Local Overrides machen den Browser zu einer Sandbox für Performance-Hypothesen, in der jede Iteration Sekunden statt Minuten dauert.

Wenn Sie mit einem lokalen Entwicklungsserver arbeiten, ist der Nutzen von Overrides geringer, da Sie die Quellen bereits kontrollieren. Wenn Sie jedoch eine Idee schnell in der Produktion oder auf einer fremden Seite ohne Zugriff auf die Codebasis testen müssen, ist dieses Werkzeug unverzichtbar.

⁉️🤔 Häufig gestellte Fragen

Bleiben Local Overrides nach dem Schließen des Browsers erhalten?

Ja, alle Dateien werden in dem von Ihnen auf der Festplatte gewählten Ordner gespeichert. Nach einem Neustart von Chrome werden Overrides automatisch übernommen, vorausgesetzt, das Kontrollkästchen Enable Local Overrides blieb aktiviert. Die Dateien selbst verschwinden nirgendwo, da es sich um ganz normale Dateien in Ihrem Dateisystem handelt.

Kann ich eine API-Antwort (JSON) überschreiben, nicht nur statische Dateien?

Ja, ab Chrome 117 funktioniert das. Klicken Sie im Network-Tab mit der rechten Maustaste auf eine Anfrage und wählen Sie Override content, Chrome erstellt eine lokale Datei mit dem Response-Body, den Sie bearbeiten können. Bei der nächsten Anfrage liefert der Browser Ihre lokale Version anstelle der Server-Antwort aus.

Warum werden meine im Elements-Panel vorgenommenen Änderungen nach dem Aktualisieren zurückgesetzt?

Das Elements-Panel bearbeitet das DOM im Speicher, nicht die Quelldateien. Damit Änderungen ein F5 überdauern, wechseln Sie zum Sources-Tab, suchen die entsprechende Datei und bearbeiten sie dort. Speichern Sie mit Ctrl+S, und Chrome erstellt ein lokales Override.

Wie kann ich Local Overrides mit einem Kollegen teilen?

Senden Sie einfach den Inhalt des Overrides-Ordners. Der Kollege legt die Dateien in seinem Ordner ab, gibt diesen in den DevTools über Select folder for overrides an, und alle Bearbeitungen werden auf seinem Rechner wirksam. Für die Teamarbeit ist es praktisch, den Overrides-Ordner im Git-Repository des Projekts zu führen.

Kann ich Local Overrides in Firefox oder anderen Browsern nutzen?

Firefox hat kein Analogon zu Local Overrides, das Speichern von Änderungen zwischen Reloads wird nicht unterstützt. Edge, basierend auf Chromium, verfügt über dieselbe Funktionalität wie Chrome, da es die gemeinsame DevTools-Codebasis nutzt. Auch Brave und Opera unterstützen Overrides als Chromium-Browser.

Warum Sie Local Overrides tatsächlich benötigen

Local Overrides in Chrome DevTools sind nicht nur eine „praktische Funktion". Es ist ein Weg, den Browser in eine vollwertige Umgebung für schnelles Prototyping und Hypothesentests zu verwandeln, ohne den Produktionscode anzufassen. Sie sparen sich „Bearbeiten → Bauen → Bereitstellen → Prüfen"-Zyklen und erhalten sofort Ergebnisse.

Probieren Sie es gleich aus: Öffnen Sie eine beliebige Seite, aktivieren Sie Overrides und ändern Sie eine Überschriftenfarbe. Aktualisieren Sie die Seite. Sehen Sie, dass die Farbe geblieben ist? Genau darum ging es.