Google Chrome mit Echtzeit-CSS-Bearbeitung und Speichern der Änderungen in die Originaldatei. Ist es möglich?

15369
Mahn

Ich liebe moderne Browser unter anderem, wie Sie die CSS bearbeiten und die Ergebnisse in Echtzeit sehen können. Beim Entwerfen von Frontend-Elementen muss ich häufig viele CSS-Eigenschaften direkt in Chrome anpassen. Nur wenn ich mit dem Ergebnis zufrieden bin, kopiere ich alle Änderungen in meine ursprünglichen CSS-Dateien zurück. Ich bin nicht sicher, wie üblich diese Praxis ist, aber sie funktioniert für mich.

Die Frage: Gibt es eine Möglichkeit, vielleicht eine Erweiterung, die die Originalseite css in google chrome mit der bearbeiteten Seite vergleichen und alle Änderungen ausgeben kann? Das hört sich vielleicht faul an, aber es kann sinnvoll sein: Wenn Sie CSS etwa eine Stunde lang auf Chrome bearbeitet haben, kann das Nachverfolgen aller Änderungen über alle Divs und Klassen hinweg zeitaufwändig sein. In diesem Fall können die Änderungen sofort ausgegeben werden würde viel Zeit sparen.

Edit: Oder vielleicht kann dies mit einigen Javascript-Zaubereien in der Konsole erledigt werden?

6

2 Antworten auf die Frage

7
Leniel Maccaferri

Diese in Google Chrome integrierte Funktion könnte Sie interessieren:

Ändern Sie CSS und SPEICHERN im lokalen Dateisystem mit den Chrome Developer Tools

enter image description here

Ich habe es jetzt ausprobiert und es funktioniert hervorragend, um die geänderten Zeilen hervorzuheben. Klicken Sie einfach auf Speichern und fertig! :)

Während dies die Frage theoretisch beantworten kann, ist es [bevorzugt] (http://meta.stackexchange.com/q/8259), die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Vielen Dank Der Hochstapler vor 11 Jahren 3
@OliverSalzburg Ich denke, dass es hier keine Notwendigkeit gibt ... Wenn ich die wesentlichen Teile hinzufügen würde, würde ich die Post kopieren. Der Beitrag ist voll mit Bildern, die den gesamten Prozess hervorheben. Leniel Maccaferri vor 11 Jahren 0
Sie müssen nicht alles kopieren. Fassen Sie einfach das Konzept zusammen, damit Ihre Antwort bestehen kann, ohne dem Link folgen zu müssen. Der Hochstapler vor 11 Jahren 1
Erstaunlich, es muss eine neu hinzugefügte Funktion zu Chrome gewesen sein, da ich die Änderungen, die auf der Ressourcenseite von Chrome hervorgehoben wurden, vorher nicht bemerkte, aber sie erscheinen tatsächlich jetzt! Vielen Dank! Mahn vor 11 Jahren 1
Als Randbemerkung finde ich es lustig, dass der Tag, an dem ich diese Frage gepostet habe, genau der Tag ist, an dem der Blog-Beitrag erstellt wurde. Hätte ich ein paar Stunden später gesucht, hätte ich es vielleicht gefunden ... trotzdem stürzt Google Chrome. Mahn vor 11 Jahren 0
(Außerdem hat @OliverSalzburg wahrscheinlich Recht, wenn Sie auf externe Inhalte verlinken, normalerweise zuerst eine kurze Zusammenfassung schreiben - kein Thema für mich, seit ich meine Frage beantwortet habe, aber ich kann verstehen, warum er das sagen würde.) Mahn vor 11 Jahren 0
Hatte das nicht bemerkt! Wirklich interessant ... Ich kam zu Ihrer Frage, als ich nach dieser Frage suchte, aber nach Firefox + Firebug. Ich war müde von der Suche und entschied mich dann für Chrome zu suchen und fand den Link. Ich sehe kein Problem, wenn Sie einem Link folgen, wenn er die Frage beantwortet! Links sind dafür. Warum sollte ich die Schritte umschreiben / zusammenfassen (warum nicht wiederholen), wenn sie wirklich gut in dem verlinkten Post beschrieben werden? :) Leniel Maccaferri vor 11 Jahren 0
Hallo, ich bin der Autor des Blog-Artikels. Ich habe die Option "Speichern unter" entdeckt, als ich eine Google IO 2011-Präsentation sah. Hier ist der Link: http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=player_detailpage#t=515s Das ist wirklich interessant. Es gibt auch andere neue Funktionen wie CSS-Autovervollständigung und CSS-Revision. Matteo Conta vor 11 Jahren 3
@contam: super toller Fund ... und nochmals vielen Dank fürs Teilen. Leniel Maccaferri vor 11 Jahren 0
@contam das ist großartig, vielen Dank, ich denke, wir sollten mit Google IO-Chrome-relevanten Dingen Schritt halten! Mahn vor 11 Jahren 0
1
Tarun

Chrome macht dies jetzt automatisch. Ich verwende v33, aber das ist jetzt schon eine Weile da.

  1. Nehmen Sie einfach eine Änderung an der CSS-Datei vor und speichern Sie sie im Quellenbedienfeld.
  2. Alle nachfolgenden Änderungen werden automatisch gespeichert.

Wenn Sie Workspaces verwenden, wird die Datei im Dateisystem selbst im Quellensegment als geändert betrachtet und nicht in mehreren Versionen derselben Datei.

Verwandte Probleme