Änderungen: HTML-, CSS- und JavaScript-Änderungen nachverfolgen

Sofia Emelianova

Im Bereich Änderungen können Sie Codeänderungen verfolgen, die in den Entwicklertools vorgenommen wurden.

Übersicht

Im Bereich Änderungen können Sie die Änderungen verfolgen, die Sie an folgenden Elementen vornehmen:

• HTML in Quellen mit aktivierten lokalen Überschreibungen
• CSS unter Elemente > Styles oder Quellen
• JavaScript unter Quellen

Im Bereich Änderungen werden nur die Änderungen angezeigt, die Sie in den Entwicklertools vornehmen. Wenn Sie die Entwicklertools oder die Seite aktualisieren, werden die Änderungen nicht übernommen.

Wenn Sie möchten, dass Änderungen in den Entwicklertools bei jedem Seitenaufbau beibehalten werden, folgen Sie der Anleitung unter Lokale Überschreibungen.

Wenn Sie möchten, dass Änderungen in DevTools in Ihren lokalen Quellen geschrieben werden, folgen Sie der Anleitung unter Dateien mit Workspaces bearbeiten und speichern.

Bereich „Änderungen“ öffnen

So öffnen Sie den Bereich Änderungen:

1. Öffnen Sie die Entwicklertools.

2. Drücken Sie Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS), um das Befehlsmenü zu öffnen.

3. Geben Sie changes ein, wählen Sie Änderungen anzeigen aus und drücken Sie die Eingabetaste.

   

Alternativ können Sie rechts oben auf  Entwicklertools anpassen und steuern > Weitere Tools > Änderungen klicken.

Standardmäßig wird in den DevTools der Bereich Änderungen unten im DevTools-Fenster im Schieberegler angezeigt.

Änderungen ansehen und verstehen

So rufen Sie Ihre Änderungen auf:

1. Öffnen Sie die Entwicklertools.

2. Nehmen Sie Änderungen an Ihren Quellen vor:

   • HTML: Aktivieren Sie zuerst Lokale Überschreibungen und nehmen Sie dann Änderungen unter Quellen vor.
   • CSS unter Elemente > Styles oder Quellen
   • JavaScript unter Quellen

3. Öffnen Sie den Bereich Änderungen und wählen Sie rechts eine Datei aus.

4. Sehen Sie sich die diff-Ausgabe an, in der Folgendes hervorgehoben wird:

Im Bereich Änderungen wird die diff-Ausgabe automatisch im Format „Pretty Print“ dargestellt, sodass Sie nicht horizontal scrollen müssen, um die Änderungen in einer einzigen Zeile zu sehen.

CSS-Änderungen kopieren

Wenn Sie unter Elemente > Stile Änderungen am CSS vorgenommen haben, können Sie sie alle mit einer einzigen Schaltfläche kopieren:

1. Öffnen Sie den Bereich Änderungen und wählen Sie rechts die CSS-Datei aus, an der Sie Änderungen vorgenommen haben.

   

2. Klicken Sie unten im Bereich Änderungen auf die Schaltfläche Kopieren.

Alle Änderungen an einer Datei rückgängig machen

So heben Sie Änderungen an einer Datei auf:

1. Wählen Sie links im Bereich Änderungen eine Datei mit Änderungen aus, die Sie rückgängig machen möchten.
2. Klicken Sie unten in der Aktionsleiste auf  Alle Änderungen an der aktuellen Datei rückgängig machen.