Exportieren Sie CSS-Änderungen aus dem Inspektor (Webkit, Firebug usw.)

Wenn ich mit CSS arbeite, teste ich häufig in einem Browser, z. B. Chrome. Klicken Sie mit der rechten Maustaste auf ein Element, klicken Sie auf Element überprüfen und bearbeiten Sie das CSS genau dort. Die Verwendung von Pfeiltasten zum Ändern von Rändern und Polstern macht das Aneinanderreihen sehr einfach.

Es ist nicht allzu schwer, diese Änderungen zu übernehmen und auf die CSS-Datei anzuwenden, aber es wäre cool, wenn ich einfach mit der rechten Maustaste auf den Selektor im Inspektor klicken und "Exportieren" oder "Kopieren" auswählen und den Inhalt in meinem Verzeichnis haben könnte Zwischenablage.

Gibt es so etwas?

Ich habe die Antwort darauf gefunden, zumindest ab Chrome v14.

Klicken Sie im Abschnitt Elemente einfach auf den Link "Dateiname: Leinennummer" neben den CSS-Regeln. Die angezeigte CSS-Datei enthält alle Änderungen.

Dieser Ort genau:

In Chrome können Sie auf der Registerkarte Quellen mit der rechten Maustaste auf eine CSS-Datei klicken und auf "Lokale Änderungen" klicken.

Dies zeigt Ihnen alle Ihre lokalen Änderungen. Jede Revision ist mit einem Zeitstempel versehen und Sie können zu jeder vorherigen Revision zurückkehren.

Weitere Informationen finden Sie im Abschnitt Live-Bearbeitung und Revisionsverlauf dieses Lernprogramms.

Firediff ist ein Firebug-Add-On, das Änderungen in Firebug nachverfolgt . Es protokolliert alles, was Sie im HTML-Bereich tun (großartig), aber auch Ihre kurze Verwendung der Web Developer Toolbar-Erweiterung (nicht so großartig), z. B. Umschalt-Strg-F, um Informationen zur Schriftgröße in px zu erhalten.

Ich habe eine Firebug-Erweiterung in Chrome gesehen, sie aber nicht getestet. Ich verwende Firediff mit Firefox.

Ich habe eine Chrome-Erweiterung erstellt, die genau dies tut.

Es heißt StyleURL - es übernimmt alle CSS-Änderungen, die Sie in Chrome Inspector vorgenommen haben, und gibt gültiges CSS als Diff aus: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Hier ist ein Beispiel, in dem ich dieser Seite "padding-bottom: 50px" hinzugefügt habe:

Es ist Open Source und auch auf GitHub: https://github.com/Jarred-Sumner/styleurl-extension

In Chrome gibt es auch die Registerkarte Änderungen in der Konsolenschublade, auf der alle Änderungen von CSS angezeigt werden. Es ist kein Export, aber zumindest ist es sehr praktisch, schnell zu erfassen, was sich geändert hat.

Ich habe dieses Produkt bereits auf SO vorgeschlagen (ich bin in keiner Weise mit ihnen verbunden).

http://www.skybound.ca/

Ausgezeichnetes Produkt. Klingt nach genau dem, wonach Sie suchen und vielem mehr.

BEARBEITEN: In mehreren anderen Antworten wurde die Fähigkeit von Google Chrome erwähnt, auf Ihre lokalen Dateien zu verlinken (was sehr, sehr cool ist). Schauen Sie sich die anderen Antworten an!

Wenn Sie externes CSS bearbeiten, können Sie die neueste Version aus dem Bedienfeld Ressourcen in einen beliebigen Texteditor ziehen, der DnD unterstützt (siehe http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/) . Weitere Informationen finden Sie im Abschnitt "Persistierende Änderungen".) Sie können Ihre CSS-Änderungen auch auf eine frühere Version der Stylesheet-Ressource zurücksetzen (im Popup-Menü mit der rechten Maustaste einer Stylesheet-Revision).

Wie von Cloudworks erwähnt, hat sich die Antwort darauf geändert. Dies kann jetzt mit der Chrome DevTools Autosave- Erweiterung recht gut erreicht werden . Dieses Tool verfolgt CSS- und JavaScript-Änderungen, die in der Chrome Developer Tools-Konsole vorgenommen wurden, und speichert sie wieder in lokalen Dateien. Anweisungen zum Installieren und Einrichten der Erweiterung finden Sie in der Anleitung von @addyosmani in seinem Blog hier .

Es gibt auch einen praktischen Screencast, der die Erweiterung ziemlich gut beschreibt.

Mit Workspaces können Sie Ihr CSS speichern, während Sie es in Ihrem Inspektor (in Chrome) eingeben. Das Problem ist , dass jede Änderung automatisch gespeichert wird und es gibt keine Möglichkeit , diese Funktion zu deaktivieren, wie spitz zulauf in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ und deaktivieren die automatische Speicherung von CSS Änderungen in Chrome Developer Tools .

Sowohl Firefox als auch Chrome unterstützen diese Funktion jetzt. Beachten Sie jedoch, dass Sie auf einigen Plattformen, wenn nicht alle Chrome standardmäßig nicht anzeigen, die Ansicht "Änderungen" aktivieren müssen, um sie anzuzeigen (in meinem Kubuntu Linux 20.04 war dies nicht der Fall) Standardmäßig) können Sie dies folgendermaßen aktivieren: Gehen Sie zur Schaltfläche "Anpassen und Steuern von DevTools" in der Entwickler-Tools-Leiste> "Weitere Tools"> "Änderungen" . Die Registerkarte wird dann auf der Schaltfläche angezeigt :

In Firefox muss es nicht aktiviert werden, aber wenn Sie aus der Chrom * -Welt kommen, ist es möglicherweise schwierig, es zu finden. Überprüfen Sie einfach den letzten Abschnitt rechts auf der Registerkarte "Inspektor":

Wenn Sie die Firefox Stock Dev-Tools verwenden, können Sie das CSS direkt im Dialogfeld "Tools" bearbeiten. Klicken Sie auf die Schaltfläche "CSS-Ansichtsfenster" (dies ist die Schaltfläche oben mit dem {}Symbol) und bearbeiten Sie das CSS direkt. Es wird in Echtzeit im Browser aktualisiert und wenn Sie fertig sind, kopieren Sie es einfach direkt in Ihre CSS-Datei. Nett!

Eine Antwort speziell für Safari hinzuzufügen - das ist irgendwie möglich.

Wenn Sie CSS im Abschnitt Stile im Inspektor für eine vorhandene CSS-Datei bearbeiten, können Sie Cmd-Sdie gesamte Datei mit den Änderungen erneut speichern. Wenn Sie jedoch eine Metasprache wie Sass / Präprozessor / Generieren Ihres CSS mit Bündelung usw. verwenden, löst dies meines Erachtens das Problem nicht wirklich, obwohl dies möglicherweise mit CSS-Quellkarten möglich ist.

Wenn Sie CSS oben im Abschnitt "Stile" unter " Style AttributeInline-Stile hinzufügen" (nicht an eine vorhandene CSS-Datei gebunden) bearbeiten , scheint es nicht möglich zu sein, alle diese Änderungen einfach zu exportieren. Im Moment kopiere und füge ich die Überschreibungen für jedes Element manuell ein.

Die offiziellen Apple-Dokumente sind etwas veraltet, finden Sie jedoch hier: Web Inspector Tutorial - Bearbeiten von Code zum Ändern Ihrer Webseite .

In Chrome können Sie im CSS-Inspektor auf die Schaltfläche + klicken und diese gedrückt halten und dann Ihre Änderungen zum Inspector-Stylesheet hinzufügen. Es ist nicht so bequem wie das direkte Bearbeiten in Ihren CSS-Selektoren, aber was Sie schreiben, wird alles in inspector-stylesheet.css sein

Mein In-Beta-Produkt LIVEditor macht genau das.

Damit Sie es leicht verstehen, können Sie sich vorstellen, dass der Inspektor von Firebug in Ihren Texteditor eingebettet ist .

Auf diese Weise müssen Sie nicht die Änderungen manuell im Code - Editor erneut , nachdem Sie zwicken es mit Firebug oder Webkit Entwickler - Tools.