Tutorials

HTML in Google Chrome bearbeiten und lokal speichern: Eine Schritt-für-Schritt-Anleitung

Melden

Hier ist ein ausführliches Tutorial, wie du HTML-Code direkt in Google Chrome bearbeiten und die Änderungen dauerhaft auf deinem Computer speichern kannst.

Standardmäßig sind Änderungen, die du über die Entwicklertools (Inspect Element) in Chrome vornimmst, nur temporär. Sobald du die Seite neu lädst, sind sie verschwunden. Es gibt jedoch zwei effektive Wege, um diese Änderungen lokal zu sichern.

Methode 1: Die klassische "Speichern unter"-Methode (Einfach)

Diese Methode eignet sich am besten, wenn du eine bestehende Webseite manipulieren und das Ergebnis als neue HTML-Datei auf deinem Rechner sichern möchtest.

  1. Entwicklertools öffnen: Klicke mit der rechten Maustaste auf ein beliebiges Element der Webseite und wähle "Untersuchen" (oder drücke F12).
  2. HTML bearbeiten: Klicke im Reiter "Elements" mit der rechten Maustaste auf den Code (z. B. auf das <body>-Tag oder ein <div>) und wähle "Edit as HTML".
  3. Änderungen vornehmen: Tippe deinen gewünschten Code ein.
  4. Speichern:
    • Klicke irgendwo außerhalb des Bearbeitungsfensters, um die Änderung im Browser anzuzeigen.
    • Drücke Strg + S (Windows) oder Cmd + S (Mac).
    • Wähle als Dateityp "Webseite, nur HTML" aus.
    • Chrome speichert nun die modifizierte Version der Seite lokal auf deiner Festplatte.

Methode 2: Chrome "Overrides" verwenden (Für Fortgeschrittene)

Mit dieser Methode kannst du Änderungen direkt im Browser vornehmen, die automatisch in eine lokale Datei auf deinem Computer geschrieben werden. Dies ist ideal für Webentwickler.

Schritt 1: Lokalen Ordner vorbereiten

Erstelle einen Ordner auf deinem Computer, in dem die Dateien gespeichert werden sollen (z. B. "Chrome_Projekt").

Schritt 2: Overrides in Chrome aktivieren

  1. Öffne die Entwicklertools (F12).
  2. Klicke im oberen Menü auf den Reiter "Sources" (Quellcode).
  3. In der linken Spalte siehst du einen Reiter namens "Overrides" (falls nicht sichtbar, klicke auf den Pfeil >>).
  4. Klicke auf "+ Select folder for overrides".
  5. Wähle den Ordner aus, den du in Schritt 1 erstellt hast.
  6. Chrome zeigt oben eine Leiste an: "DevTools requests full access to [Ordnername]". Klicke auf "Zulassen" (Allow).

Schritt 3: Dateien bearbeiten und dauerhaft speichern

  1. Gehe nun im "Sources"-Panel zum Reiter "Page".
  2. Wähle die HTML-Datei aus, die du bearbeiten möchtest.
  3. Klicke mit der rechten Maustaste auf die Datei und wähle "Save for overrides".
  4. Bearbeite den Code nun direkt im Texteditor von Chrome.
  5. Drücke Strg + S (Windows) oder Cmd + S (Mac).

Der Clou: Chrome speichert die Datei nun physisch in deinem lokalen Ordner. Selbst wenn du die Seite aktualisierst, lädt Chrome die Version aus deinem lokalen Ordner anstatt der Originalversion vom Server.

Methode 3: Lokale Dateien direkt bearbeiten (Workspaces)

Wenn du bereits eine HTML-Datei auf deinem Rechner hast und diese in Chrome bearbeiten willst:

  1. Ziehe deine lokale HTML-Datei einfach per Drag & Drop in ein Chrome-Fenster.
  2. Öffne die Entwicklertools (F12) -> Reiter "Sources".
  3. Klicke links auf den Reiter "Filesystem".
  4. Klicke auf "+ Add folder to workspace" und wähle deinen Projektordner aus.
  5. Bestätige den Zugriff mit "Zulassen".
  6. Wenn du nun im "Sources"-Panel Änderungen am Code vornimmst und mit Strg + S speicherst, wird die Datei auf deiner Festplatte sofort aktualisiert.

Zusammenfassung: Welche Methode wann?

  • Methode 1: Ideal für schnelle Snapshots von fremden Webseiten.
  • Methode 2 (Overrides): Perfekt, um CSS- oder HTML-Anpassungen an bestehenden Live-Webseiten zu testen, ohne den Serverzugriff zu haben.
  • Methode 3 (Workspaces): Der beste Weg für die eigene Webentwicklung direkt im Browser.

Pro-Tipp: Wenn du viel am Design änderst, nutze den Reiter "Styles" auf der rechten Seite. Auch CSS-Änderungen lassen sich über die "Overrides"-Funktion dauerhaft speichern!

0