Anzeigen modifizierter CSS direkt mit den Entwicklertools

582
user10089632

Im Entwickler-Tool können Sie CSS im Handumdrehen ändern und die Anzeige ändert sich sofort.

Wenn Sie jedoch auf Seitenquell anzeigen klicken, wird die ursprüngliche CSS des Dokuments angezeigt

Es könnte wunderbar sein, dass ein CSS durch einen Befehl oder ein Addon erstellt wird.

1
Was ist deine Frage? DavidPostill vor 6 Jahren 0
@DavidPostill Nun, meine Frage war nach einer Möglichkeit, das CSS zu extrahieren user10089632 vor 6 Jahren 0

1 Antwort auf die Frage

1
DavidPostill

Wie kann ich modifiziertes CSS mithilfe von Entwicklertools im Handumdrehen anzeigen?

Feuerfuchs

Änderungen, die Sie in der Regelansicht vornehmen, werden im Stil-Editor angezeigt und umgekehrt.

Source Firefox Developer Tools Untersuchen und bearbeiten Sie CSS

Um den Style-Editor zu öffnen, wählen Sie die Option "Style-Editor" aus dem Menü "Web Developer" (ein Untermenü im Menü "Tools" auf dem Mac). Die Toolbox wird am unteren Rand des Browserfensters angezeigt, wobei der Stil-Editor aktiviert ist:

Stileditor

Quell- Editor für Firefox-Entwicklerwerkzeuge

Chrom

Anhaltende Änderungen

  • Bei einer externen Stylesheet-Regeländerung wird der entsprechende Ressourcentext im Bedienfeld „Ressourcen“ aktualisiert, und der Revisionsverlauf wird für diese Style-Sheet-Ressourcen gespeichert, bis das DevTools-Fenster geschlossen wird.

  • Aktivieren Sie das Bedienfeld Ressourcen. Suchen Sie nach tutorial.css in der Ressourcenstruktur. Beachten Sie, dass der Baumknoten erweiterbar ist. Klicken Sie auf den Pfeil neben dem Knotentitel, und Sie sehen alle Ressourcenänderungen, die Sie oben vorgenommen haben.

  • Wählen Sie eine Revision aus, um die Unterschiede zur ursprünglichen Stylesheet-Ressource anzuzeigen, die zeilenweise hervorgehoben ist.

  • Sie können einen Stylesheet-Revisionsknoten per Drag & Drop in die meisten Texteditoren ziehen, um den Revisionsinhalt zu exportieren.

Quelle Bearbeiten von Stilen

Verwandte Probleme