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

104

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?

süchtig nach Winter
quelle
Es sollte nicht schwer sein, eine Safari / Chrome-Erweiterung dafür zu schreiben. Verwenden Sie das Kontextmenü, damit der Benutzer mit der rechten Maustaste auf ein Element klicken und dann die currentStyle-Eigenschaft des Objekts abrufen und möglicherweise an die Zwischenablage senden kann.
Tbeseda
Vielleicht hätte ich suchen sollen, bevor ich hier einen Kommentar abgegeben habe. Mögliches Duplikat von stackoverflow.com/questions/162644/…
MiffTheFox
Ah schön. Ich würde gerne einige Antworten für Chrome / Web-Kit sehen, aber das sind einige großartige Antworten dort. Danke @MiffTheFox
Hookedonwinter
Schauen Sie sich Backfire an: blog.quplo.com/2010/08/… Ich habe es nicht ausprobiert, klingt aber vielversprechend.
Bryan Downing
1
@BryanDowning Fertig! Das ist super toll. Danke für den Ping.
Hookedonwinter

Antworten:

77

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:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

Nicholas Zographos
quelle
4
Beachten Sie, dass dies auch für neue CSS-Selektoren funktioniert, die im Inspektor über das +Symbol hinzugefügt werden
Jonathan Day,
1
Dies funktioniert nur für Änderungen, die dem Inspector-Stylesheet hinzugefügt wurden. Es funktioniert nicht bei Änderungen an den Regelsätzen für vorhandene Klassenselektoren.
ian.pvd
49

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.

Chris MacDonald
quelle
1
Scheint, als könnten Sie nur bis zu Ihrem letzten Verweis zurücksetzen. So verlieren Sie Änderungen, wenn Sie versehentlich Tab usw.
aktualisieren
Wie funktioniert das mit modernen Bundlern wie Webpack, bei denen Ihr gesamtes CSS in einer Datei gebündelt ist?
Mattgabor
Ich sehe diese "lokalen Änderungen" nicht. Ist diese Antwort veraltet?
Luke Pighetti
@LukePighetti Ich sehe es in Version 79 (12/2019), wenn ich die Quelldatei öffne, an der ich interessiert bin> Rechtsklick> Lokale Änderungen. Das öffnet eine Registerkarte in der "Konsolenschublade" mit dem Titel "Änderungen", die ein linkes Menü mit allen meinen geänderten Dateien enthält. Sie können auch darauf zugreifen, indem Sie auf die Menü-Auslassungspunkte> Weitere Werkzeuge> Änderungen klicken.
xr280xr
11

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.

FelipeAls
quelle
Cooles Plugin. Bringt mich auf jeden Fall näher an den Ort, an dem ich will. Ich werde abwarten, ob etwas Besseres dabei ist (z. B. voll kopierformatiertes CSS in die Zwischenablage).
Hookedonwinter
7

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: StyleURL Beispiel diff

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

Jarred Sumner
quelle
Sehr handliches Werkzeug!
DanTheMann
2
Alle nicht funktionierenden Links akzeptieren Github. Bitte aktualisieren, klingt vielversprechend
Mirosław
Dieses Projekt ist jetzt aufgegeben. Es ist eine Schande :-(
Damon Hill
6

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.

Screenshot der Registerkarte "Änderungen" in den Chrome-Entwicklungstools

Adrian B.
quelle
1
Diese Antwort bietet eine integrierte Browserlösung zum Anzeigen von Änderungen, ohne dass zusätzliche Erweiterungen installiert werden müssen. Es verfolgt Änderungen, die an einem Stylesheet (oder JS) vorgenommen wurden, als Elementdifferenz mit separaten Dateien und zeigt zeilenweise Hinzufügungen, Löschungen und Änderungen einzelner Zeichen an. Obwohl es keinen Export gibt, ist es heute eine bessere Lösung als die derzeit beste Antwort aus dem Jahr 2011.
ian.pvd
Diese Antworten enthalten nach 9 Jahren viel Lärm, aber dies ist mit Sicherheit die beste Antwort. Das einzige, was fehlt, ist eine schnelle Möglichkeit, das Diff zu exportieren, sodass Sie die Änderungen automatisch in einem Skript oder einer IDE verarbeiten können, anstatt ein Stylesheet nebeneinander ausführen und manuell anpassen zu müssen.
Sami Fouad
5

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!

Bryan Downing
quelle
Sieht ziemlich toll aus. Schade, dass es 80 Dollar sind. Danke @Bryan, gute Entdeckung
Hookedonwinter
2
Die Antwort hier hat sich in den letzten Jahren geändert. Mit Chrome DevTools können Sie jetzt Ihre Änderungen in die Datei zurückschreiben . Aufregende Zeiten!
Cloudworks
4

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).

Alexander Pawlow
quelle
4

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 .

Geben Sie hier die Bildbeschreibung ein

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

Andrew Craswell
quelle
1

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 :

Geben Sie hier die Bildbeschreibung ein

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":

Geben Sie hier die Bildbeschreibung ein

Mariano Ruiz
quelle
0

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!

Abraham Brookes
quelle
0

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 .

Taylor Edmiston
quelle
0

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

Frazer Kirkman
quelle
-1

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.

Edwin Yip
quelle
8
Klingt gut. Schade, dass es für Windows ist.
KPM
Im Allgemeinen sollten Links zu einem Tool oder einer Bibliothek mit Verwendungshinweisen, einer spezifischen Erläuterung der Anwendbarkeit der verknüpften Ressource auf das Problem oder einem Beispielcode oder, wenn möglich, allen oben genannten Elementen versehen sein.
Samuel Liew