Firebug ist das bequemste Tool, das ich zum Bearbeiten von CSS gefunden habe. Warum gibt es für CSS keine einfache Option zum Speichern?

Ich stelle immer wieder fest, dass ich in Firebug Optimierungen vornehme, dann zu meiner ursprünglichen CSS-Datei zurückkehre und die Optimierungen repliziere.

Hat jemand eine bessere Lösung gefunden?

BEARBEITEN: Mir ist bekannt, dass der Code auf einem Server gespeichert ist (in den meisten Fällen nicht auf meinem eigenen), aber ich verwende ihn beim Erstellen meiner eigenen Websites.

Firebug verwendet nur die vom Server heruntergeladene CSS-Datei Firefox und weiß genau, in welchen Zeilen welche Dateien bearbeitet werden. Ich kann nicht verstehen, warum es keine Option "Exportieren" oder "Speichern" gibt, mit der Sie die neue CSS-Datei speichern können. (Womit ich dann die Fernbedienung ersetzen könnte).

Ich habe versucht, an temporären Speicherorten zu suchen, Datei > Speichern ... zu wählen und mit den Ausgabeoptionen in Firefox zu experimentieren, aber ich habe immer noch keinen Weg gefunden.

EDIT 2: Die offizielle Diskussionsgruppe hat viele Fragen , aber keine Antworten.

Ich habe hier genau nach dieser Funktion gesucht, dh in der Lage zu sein, bearbeitete CSSEigenschaften wieder in der Originaldatei (auf meinem lokalen Entwicklungscomputer) zu speichern . Leider habe ich Firefox + Firebug aufgegeben und nach etwas Ähnlichem für Google Chrome gesucht, nachdem ich viel gesucht und nichts gefunden hatte, das meinen Anforderungen entspricht (OK, es gibt CSS Updater, aber Sie müssen sich registrieren und es ist eine kostenpflichtige Erweiterung ...). Ratet mal ... Ich habe gerade diesen großartigen Beitrag gefunden, der eine gute Möglichkeit zeigt, dies zum Laufen zu bringen (in Chrome integriert - es sind keine zusätzlichen Erweiterungen erforderlich):

Ändern Sie CSS und SAVE im lokalen Dateisystem mithilfe der Chrome Developer Tools

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

Hier ist ein Video, das dies und vieles mehr erklärt: Google I / O 2011: Chrome Dev Tools Reloaded

Ich hoffe, es hilft, wenn es Ihnen egal ist, den Browser zu ändern, während Sie Ihre CSS-Dateien bearbeiten. Ich habe die Änderung bereits vorgenommen, aber ich würde diese Funktionalität sehr gerne in Firebug integrieren. :) :)

[Update 1]

Heute habe ich gerade dieses Video gesehen: Firefox CSS Live-Bearbeitung in Sublimetext (in Arbeit) Sieht in der Tat vielversprechend aus.

[Update 2]

Wenn Sie Visual Studio 2013 mit Web Essentials verwenden, können Sie CSS automatisch synchronisieren, wie in diesem Video gezeigt:

Web Essentials: Integration von Browser-Tools

Ich wundere mich schon seit einiger Zeit über das Gleiche,
nur um mich zu ärgern, wenn dein Freestyle-Css'ing mit Firebug im Moment durch
ein versehentliches Nachladen oder so weiter in Stücke gerissen wird ...

Für meine Absichten und Zwecke habe ich endlich das Tool gefunden ....: FireDiff .

Es gibt Ihnen einen neuen Tab, wahrscheinlich eine seltsame David Bowie-Referenz, genannt "Änderungen"; Dies ermöglicht Ihnen nicht nur zu sehen / speichern, was Firebug, dh Sie, getan haben,
sondern optional auch Änderungen zu verfolgen, die von der Seite selbst vorgenommen wurden ... wenn es und / oder Sie so geneigt sind.

So dankbar, dass ich nicht jede CSS-Regel, die ich mache , neu tippen oder neu vorstellen und dann neu tippen muss ...

Hier ist ein Link zum Entwickler (lassen Sie sich nicht vom ersten Auftritt herabsetzen, vielleicht gehen Sie gleich zu Mozilla Add-On-Repository .

Mit dem Web Developer-Add-On können Sie Ihre Änderungen speichern. Ich möchte die Bearbeitung von Firebug mit der Speicherfunktion von Web Developer kombinieren.

Verwenden Sie die Schaltfläche " Speichern " (klicken Sie auf CSS-Menü -> CSS bearbeiten), um das geänderte CSS auf der Festplatte zu speichern.

Empfehlung : Verwenden Sie die Schaltfläche " Stick ", um zu verhindern, dass Ihre Änderungen verloren gehen, wenn Sie die Registerkarte für andere Suchvorgänge ändern. Wenn es möglich ist, verwenden Sie nur eine Registerkarte, um die zugehörigen Suchvorgänge, Webmail usw. zu bearbeiten, und ein anderes Firefox-Fenster.

Ich habe gerade ein Firebug-Addon in der Sandbox des Mozilla-Addons veröffentlicht, das genau das tun kann, was Sie wollen: https://addons.mozilla.org/en/firefox/addon/52365/

Es speichert die "berührten" CSS-Dateien bei Bedarf auf Ihrem Webserver (durch Kommunikation mit einem Ein-Datei-Webservice-PHP-Skript).

Dokumentation finden Sie auf meiner Homepage oder auf der Addon-Seite

Ich würde mich über Tests, Fehlerberichte, Kommentare, Bewertungen und Diskussionen darüber freuen, da es sich noch in der frühen Beta befindet, aber bereits gut funktionieren sollte.

CSS-X-Fire

Ich bin überrascht, dass diese Frage immer noch nicht aufgeführt ist, aber wahrscheinlich, weil sie neu ist und der Autor noch keine Zeit hatte, sie zu bewerben.

Es heißt CSS-X-Fire und ist ein Plugin für JetBrains-IDEs: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .

So funktioniert es: Sie installieren eine dieser IDEs und konfigurieren die Bereitstellung (unterstützt FTP und SCP). Auf diese Weise können Sie mit dem Server synchron bleiben.

Danach installieren Sie dieses Plugin. Wenn es startet, werden Sie gefragt, ob er ein Plugin für Firefox installieren wird, um die Integration zwischen Firebug und der IDE durchzuführen. Wenn das Plugin nicht installiert werden kann, verwenden Sie einfach die Drag-and-Drop-Technik, um es zu installieren.

Nach der Installation werden alle Änderungen von Firebug nachverfolgt und Sie können sie mit einem einfachen Klick in de IDE anwenden.

FireFile

FireFile ist eine Alternative, bei der Sie der Serverseite eine kleine PHP-Datei hinzufügen müssen, um das geänderte CSS hochladen zu können.

Sie könnten verlinken firebug mit eclipse fireclipse und dann die Datei von Eclipse speichern

Ich denke, das Beste, was Sie erreichen können, ist, in Firebug in den Bearbeitungsmodus zu wechseln und den Inhalt der CSS-Datei zu kopieren und einzufügen.

Wir haben gerade Backfire eingeführt, eine Open-Source-Javascript-Engine, mit der Sie CSS-Änderungen, die in Firebug und Webkit Inspector vorgenommen wurden, auf dem Server speichern können. Die Bibliothek enthält eine beispielhafte C # -Implementierung zum Speichern der eingehenden Änderungen in Ihrem CSS.

Hier ist ein Blog-Beitrag darüber, wie es funktioniert: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Und hier ist der Code, der bei Google Code gehostet wird: http://code.google.com/p/backfire/

Ich weiß, dass dies Ihre Frage nicht beantwortet, aber überraschenderweise bietet die Firebug-Klon-Entwickler-Symbolleiste von Internet Explorer 8 (über F12 zugänglich) die Option zum "Speichern von HTML". Diese Funktion speichert das aktuelle DOM in einer lokalen Datei. Wenn Sie das DOM also irgendwie bearbeiten, z. B. indem Sie irgendwo ein Stilattribut hinzufügen, wird dies ebenfalls gespeichert.

Nicht besonders nützlich, wenn Sie Firebug verwenden, um mit CSS herumzuspielen, wie es jeder tut, aber ein Schritt in die richtige Richtung.

Ich schlage eine Lösung vor, die eine Kombination aus Firebug und FireFTP sowie Code umfasst, der direkt auf das lokale Dateisystem zugreift, wenn eine Website lokal ausgeführt wird.

Hier sind die Szenarien:

Arbeiten an einer Website, die auf einem Remotecomputer gehostet wird

In diesem Fall würden Sie die FTP-Details und den Speicherort von CSS / HTML / Javascript angeben und Firebug würde diese Dateien dann aktualisieren, wenn Sie Ihre Änderungen speichern. Möglicherweise kann es sogar die Dateien selbst finden und Sie dann auffordern, zu überprüfen, ob die richtige Datei vorhanden ist. Wenn Dateinamen eindeutig sind, sollte dies kein Problem sein.

Arbeiten an einer Website, die auf Ihrem lokalen Computer ausgeführt wird

In diesem Fall könnten Sie Firebug den lokalen Ordner der Website mitteilen, und das gleiche Verhalten würde verwendet, um die Dateien abzugleichen und zu überprüfen. Der Zugriff auf das lokale Dateisystem kann bei Bedarf über FireFTP erfolgen.

Arbeiten an einer Website, die remote ohne FTP-Zugriff gehostet wird

In diesem Fall müsste so etwas wie das FireFile-Add-On implementiert werden.

Eine zusätzliche Funktion wäre das Speichern und Öffnen von Projektdateien, in denen die Zuordnungen zwischen den lokalen Dateien und den ihnen zugeordneten URLs gespeichert sind, sowie das Speichern der FTP-Details, wie dies FireFTP bereits tut.

Ich bin der Autor von CSS-X-Fire, über das Sorin Sbarnea auch freundlicherweise in diesem Thread geschrieben hat. Ich schätze ich bin ein bisschen spät dran;)

CSS-X-Fire sendet Änderungen der CSS-Eigenschaften von Firebug an die IDE, in der die Änderungen angewendet oder verworfen werden können.

Diese Lösung bietet einige Vorteile gegenüber den meisten anderen vorhandenen Tools, die nur über die Dateinamen und den vom Browser heruntergeladenen Inhalt Bescheid wissen (siehe NickFitz-Kommentar im Originalbeitrag).

Szenario 1: Sie haben eine Website (ein Projekt) mit einer Handvoll Themen, aus denen der Benutzer auswählen kann. Jedes Thema hat eine eigene CSS-Datei, aber Firebug ist nur eine bekannt, die aktuelle. CSS-X-Fire erkennt alle übereinstimmenden Selektoren im Projekt und lässt Sie entscheiden, welche geändert werden sollen.

Szenario 2: Für das Webprojekt wurden Stylesheets zur Kompilierungszeit oder während der Bereitstellung erstellt. Sie können aus mehreren Dateien zusammengeführt werden und die Dateinamen können sich ändern. CSS-X-Fire kümmert sich nicht um die Namen der Dateien, sondern nur um die Namen der CSS-Selektoren und deren Eigenschaften.

Oben finden Sie Beispiele für Szenarien, in denen sich CSS-X-Fire auszeichnet. Da es mit den Quelldateien funktioniert und die Sprachstruktur kennt, hilft es auch, Duplikate zu finden, die Firebug, Jump-to-Code usw. nicht bekannt sind.

CSS-X-Fire ist Open Source unter der Apache 2-Lizenz. Projekthaus: http://code.google.com/p/css-x-fire/

FireFile

Firebug wurde erstellt, um ein Problem zu erkennen, das kein Debugger ist. Sie können Änderungen jedoch speichern, wenn Sie ein neues Tool hinzufügen, das Firebug in das Speichern von Änderungen integriert. Es ist FireFile, klicken Sie hier http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html .

FireFile bietet die gewünschte Funktionalität, indem der Serverseite eine kleine PHP-Datei hinzugefügt wird.

Da Firebug nicht auf Ihrem Server funktioniert, sondern das CSS von der Site nimmt und lokal speichert und Ihnen die Site mit diesen lokalen Änderungen anzeigt.

Verwenden Sie den CSS-Editor in der Firefox Web Developer-Symbolleiste:

http://chrispederick.com/work/web-developer/

Es hat genug gute Dinge, um es in Verbindung mit Firebug zu verwenden, und Sie können Ihr CSS in einer Textdatei speichern.

Verwenden Sie Backfire.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Es ist eine Open Source-Lösung, die CSS-Änderungen an den Server zurücksendet und speichert.

Backfire verwendet eine einzelne Javascript-Datei, und das Quellcode-Paket verfügt über ein funktionierendes Beispiel für die Implementierung eines .NET-Servers, das problemlos auf andere Plattformen portiert werden kann.

Ich hatte dieses Problem auch für immer und entschied schließlich, dass wir die Dinge nicht im Webinspektor bearbeiten sollten, und baute etwas dafür ( https://github.com/viatropos/design.io) ).

Eine bessere Lösung:

Der Browser zeigt automatisch CSS-Änderungen an, ohne sie neu zu laden, wenn Sie in Ihrem Texteditor auf Speichern klicken .

Der Hauptgrund, warum wir CSS im Webinspektor bearbeiten (ich verwende Webkit, aber FireBug ist in die gleiche Richtung), ist, dass wir kleine Anpassungen vornehmen müssen und das Neuladen der Seite zu lange dauert.

Bei diesem Ansatz gibt es zwei Hauptprobleme. Zunächst können Sie ein einzelnes Element bearbeiten, das möglicherweise keinen idSelektor hat. Selbst wenn Sie das generierte CSS aus dem Webinspektor kopieren / einfügen könnten, müsste es ein CSS generieren, um das CSS idzu erweitern. Etwas wie:

#element-127 {
  background: red;
}

Das würde Ihr CSS zu einem Chaos machen.

Sie können dies .spaceumgehen , indem Sie nur die Stile für einen vorhandenen Selektor ändern (den Klassen-Selektor im Webkit-Inspektor-Bild unten).

Trotzdem das zweite Problem. Die Oberfläche zu diesem Ding ist ziemlich rau, es ist schwierig, große Änderungen vorzunehmen - zum Beispiel, wenn Sie versuchen möchten, diesen CSS-Block ganz schnell an diesen Ort zu kopieren, oder was auch immer.

Ich bleibe lieber bei TextMate.

Ideal wäre es, das CSS einfach in Ihren Texteditor zu schreiben und den Browser die Änderungen widerspiegeln zu lassen, ohne die Seite neu zu laden . Auf diese Weise würden Sie Ihr endgültiges CSS schreiben, während Sie die kleinen Änderungen vornehmen.

Die nächste Stufe wäre, in einer dynamischen CSS-Sprache wie Stylus, Less, SCSS usw. zu schreiben und den Browser mit dem generierten CSS aktualisieren zu lassen. Auf diese Weise können Sie Mixins wie erstellenbox-shadow() , die die Komplexität abstrahieren, was der Webinspektor definitiv nicht konnte.

Es gibt ein paar Dinge, die das tun, aber meiner Meinung nach nichts, was es wirklich rationalisiert.

• LiveReload : Überträgt CSS ohne Aktualisierung in den Browser, wenn Sie auf Speichern klicken. Es handelt sich jedoch um eine Mac-App , sodass die Anpassung schwierig ist.
• CodeKit : Auch eine Mac-App, die den Browser bei jedem Speichern aktualisiert.

Der Hauptgrund, warum ich sie nicht verwendet habe, ist, dass ich die Art und Weise, wie diese funktionieren, nicht einfach anpassen kann.

Ich habe https://github.com/viatropos/design.io speziell zusammengestellt, um dieses Problem zu lösen, und mache es so:

1. Der Browser zeigt die CSS / js / html / etc bei jedem Speichern an, ohne die Seite neu zu laden
2. Es kann mit jeder Vorlage / Sprache / jedem Framework umgehen (Stylus, Less, CoffeeScript, Jade, Haml usw.)
3. Es ist in JavaScript geschrieben und Sie können Erweiterungen in JavaScript sehr schnell zusammenstellen.

Auf diese Weise können Sie, wenn Sie diese kleinen Änderungen an CSS vornehmen müssen, die Hintergrundfarbe festlegen, auf Speichern klicken, Nein sehen, nicht ganz, den Farbton um 10 anpassen, Speichern, Nein, Anpassen um 5, Speichern, sieht gut aus.

Die Funktionsweise besteht darin, zu beobachten, wann immer Sie eine Datei speichern (auf Betriebssystemebene), die Datei zu verarbeiten (hier funktionieren die Erweiterungen) und die Daten über Websockets, die dann verarbeitet werden (auf der Clientseite von), an den Browser zu senden die Erweiterung).

Nicht zu stecken oder so, aber ich hatte lange Zeit mit diesem Problem zu kämpfen.

Hoffentlich hilft das.

Firebug arbeitet mit dem berechneten CSS (das Sie erhalten, wenn Sie das CSS in die Dateien aufnehmen und Vererbung usw. anwenden sowie die mit JavaScript vorgenommenen Änderungen). Dies bedeutet, dass Sie es wahrscheinlich nicht direkt verwenden können, um es in eine HTML- / version-spezifische HTML-Datei aufzunehmen (es sei denn, Sie interessieren sich nur für Firefox). Auf der anderen Seite wird verfolgt, was original ist und was berechnet wird ... Ich denke, es sollte nicht sehr schwierig sein, JS zu Firebug hinzuzufügen, um dieses CSS in eine Textdatei exportieren zu können.

Ich habe mich gefragt, warum ich den Text nicht verdammt gut auswählen und vor meinen Augen kopieren kann. Besonders wenn andere sagen, dass Sie einfach "auswählen und kopieren" können. Es stellt sich heraus, dass Sie dies können . Sie müssen nur das Ziehen starten. tun außerhalb eines Textes (dh in der Rinne über oder links vom Text) starten, da ein Mauszeiger - ob Klick oder Ziehen - auf einen beliebigen Text die Eigenschaft sofort aufruft Editor. Sie können auch auf externen Text klicken, um einen Cursor zu erhalten (auch wenn dieser nicht immer sichtbar ist), den Sie dann mit den Pfeiltasten bewegen und auf diese Weise Text auswählen können.
Der in die Zwischenablage kopierte Text enthält leider keine Einrückungen, erspart Ihnen jedoch zumindest das manuelle Transkribieren des gesamten Inhalts der CSS-Datei. Lassen Sie Ihr Diff-Programm Änderungen im Leerzeichen beim Vergleich mit dem Original einfach ignorieren.

Sie können eine eigene Server-Skriptdatei schreiben, die einen Dateinamenparameter und einen Inhaltsparameter enthält.

Das Serverskript würde die angeforderte Datei finden und ihren Inhalt durch die neue ersetzen.

Das Schreiben des Javascript, das die Informationen von Firebug abruft und die nützlichen Daten abruft, wäre der schwierige Teil.

Ich persönlich würde das Entwicklerteam von firebug lieber bitten, eine Funktion bereitzustellen, es sollte ihnen nicht zu schwer fallen.

Schließlich sendet Ajax das Paar aus Dateiname und Inhalt an die von Ihnen erstellte PHP-Datei.

Zitiert aus den Firebug-FAQ :

Seiten bearbeiten

• Kann ich die Änderungen, die ich an der angezeigten Webseite vorgenommen habe, in der Quelle speichern?

  Im Moment kannst du nicht. Wie John J. Barton in der Newsgroup schrieb:

  Das Bearbeiten in Firebug ist so etwas wie das Herausnehmen der Gurken und das Hinzufügen von Senf zu einem Restaurant-Sandwich: Sie können das Ergebnis genießen, aber der nächste Kunde im Restaurant erhält immer noch Gurken und keinen Senf.

  Dies ist eine seit langem nachgefragte Funktion, die eines Tages direkt bei Firebug verfügbar sein wird. In der Zwischenzeit können Sie Firediff ausprobieren , eine Erweiterung für Firebug von Kevin Decker.

• Wie kann ich alle Änderungen, die am CSS einer Site vorgenommen wurden, in Firebug ausgeben?

  Das ist eine Funktion, die in Kevin Deckers Firediff implementiert ist .

Hier ist eine Teillösung. Nachdem Sie Ihre Änderungen vorgenommen haben, klicken Sie auf einen der Links zur entsprechenden Datei. Dies ist die Originaldatei, daher müssen Sie die Datei aktualisieren, die sich unter der Optionsmenüschaltfläche oben rechts im Firebug-Bereich befindet. Jetzt haben Sie die geänderte CSS-Seite, die Sie kopieren und einfügen können. Natürlich müssen Sie dies für jede CSS-Datei tun.

Bearbeiten: sieht aus wie Mark Biek hat eine schnellere Version

Eine sehr einfache Möglichkeit, Ihre Seite zu "bearbeiten", besteht darin, über Ihren Internetbrowser auf die Website zuzugreifen. Speichern Sie die Seite nur als HTML auf Ihrem Desktop. Gehen Sie zu Ihrem Desktop und klicken Sie mit der rechten Maustaste auf die neue Webseitendatei und wählen Sie Öffnen mit, wählen Sie Notizblock und bearbeiten Sie die Seite von dort aus. Wenn Sie HTML kennen, ist dies einfach. Nachdem Sie alle Änderungen vorgenommen haben, speichern Sie die Datei und öffnen Sie Ihre Webseite erneut. Die Änderungen sollten vorhanden sein, wenn sie korrekt durchgeführt wurden. Sie können dann Ihre neu bearbeitete Seite verwenden und sie exportieren oder an Ihren Remotestandort kopieren

Eigentlich ist Firebug ein Debug- und Analyse-Tool: kein Editor und wird offensichtlich nicht als einer angesehen. Der andere Grund wurde bereits erwähnt: Wie möchten Sie CSS ändern, das beim Debuggen einer Webseite auf einem Server gespeichert ist?