it-swarm.com.de

Warum kann ich CSS-Änderungen in Firebug nicht speichern?

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

Ich finde mich immer dabei, in Firebug Optimierungen vorzunehmen, dann zu meiner ursprünglichen CSS-Datei zurückzukehren und die Optimierungen zu replizieren.

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 CSS-Datei, die Firefox vom Server heruntergeladen hat, und weiß genau, welche Zeilen in welchen Dateien es bearbeitet. Ich kann nicht erkennen, warum es keine Option zum "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, in temporären Speicherorten zu suchen und Datei > Speichern ... und experimentieren mit den Ausgabeoptionen in Firefox, aber ich habe noch keinen Weg gefunden.

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

143
Dean Rather

Ich habe hier genau nach dieser Funktion gesucht, das heißt, ich konnte bearbeitete CSS -Eigenschaften in der Originaldatei (auf meinem lokalen Entwicklungscomputer) speichern. Leider habe ich viel gesucht und nichts gefunden, was meinen Bedürfnissen entspricht (OK, es gibt CSS Updater aber Sie müssen sich registrieren und es ist eine kostenpflichtige Erweiterung ...). Ich habe Firefox + Firebug aufgegeben und gesucht Ähnliches gilt für Google Chrome. Ratet mal, was ... Ich habe gerade diesen tollen Beitrag gefunden, der eine gute Möglichkeit zeigt, dies zum Laufen zu bringen (eingebaut in Chrome - es sind keine zusätzlichen Erweiterungen erforderlich):

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

enter image description here

Ich habe es jetzt versucht und es funktioniert großartig, die geänderten Zeilen hervorzuheben. Einfach auf Speichern klicken 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 wechseln, während Sie Ihre CSS-Dateien bearbeiten. Ich habe die Änderung bereits vorläufig vorgenommen, würde diese Funktionalität aber sehr gerne in Firebug integrieren. :)


[Update 1]

Heute habe ich gerade dieses Video gesehen: Firefox CSS live edit im Sublimetext (in Arbeit) Sieht in der Tat vielversprechend aus.

[Update 2]

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

Web Essentials: Integration der Browser-Tools

27

Ich frage mich schon seit geraumer Zeit,
Nur ein Wermutstropfen, wenn dein Freestyle-Kampf mit dem Feuerkäfer in Stücke gerissen wird
ein versehentliches Nachladen oder so ....

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

Es gibt Ihnen eine neue Registerkarte, wahrscheinlich eine seltsame David Bowie-Referenz, genannt "Änderungen"; was nicht nur erlaubt zu sehen/speichern, was firebug, ich. e. du hast getan
, aber optional auch die von der Seite selbst vorgenommenen Änderungen nachverfolgen .... wenn sie und/oder Sie dazu geneigt sind.

So dankbar, dass wir nicht neu tippen oder uns vorstellen und dann neu tippen müssen, jeden CSS-Regel, die ich mache ...

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

104
Morten Bergfall

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

alt text

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

Empfehlung : Verwenden Sie den " Stick " - Knopf, um zu verhindern, dass Ihre Änderungen verloren gehen, wenn Sie ändern die Registerkarte für andere Browsing. Wenn es möglich ist, verwenden Sie nur eine Registerkarte, um die Bearbeitung und das andere Firefox-Fenster für die zugehörigen Suchanfragen, Webmail usw. durchzuführen.

15
shosho

Ich habe gerade ein Firebug-Addon in der Mozilla-Addon-Sandbox veröffentlicht, das genau das macht, was Sie wollen: https://addons.mozilla.org)/de/firefox/addon/52365 /

Tatsächlich 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 Addonseite

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 funktionieren sollte.

13

CSS-X-Fire

Ich bin überrascht, dass es zu dieser Frage noch nicht aufgeführt ist, aber wahrscheinlich, weil es neu ist und der Autor noch keine Zeit hatte, es zu promoten.

Es heißt CSS-X-Fire und ist ein Plugin für die JetBrains-Reihe von 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. Beim Start werden Sie gefragt, ob er ein Plugin für Firefox installieren möchte, um die Integration zwischen Firebug und der IDE durchzuführen. Wenn das Plugin nicht installiert werden kann, installieren Sie es mit Drag & Drop.

Nach der Installation werden alle Änderungen von Firebug protokolliert und können mit einem einfachen Klick in die IDE übernommen werden.

CSS-X-Fire window inside the IDE.

FireFile

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

13
sorin

Sie können firebug mit fireclipse mit Eclipse verknüpfen und dann die Datei von Eclipse speichern

10
Craig Angus

Ich denke, die nächste Möglichkeit besteht darin, in Firebug in den Bearbeitungsmodus zu wechseln und den Inhalt der CSS-Datei zu kopieren und einzufügen.

9
Mark Biek

Wir haben gerade Backfire eingeführt, eine Open-Source-JavaScript-Engine, mit der Sie CSS-Änderungen, die Sie in Firebug und Webkit Inspector vorgenommen haben, auf dem Server speichern können. Die Bibliothek enthält eine Beispiel-C # -Implementierung zum Speichern der eingehenden Änderungen an 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/

7
Rahul

Ich weiß, dass dies Ihre Frage nicht beantwortet, aber überraschenderweise bietet die "Entwickler-Symbolleiste" des Firebug-Klons von Internet Explorer 8 (über F12 zugänglich) die Option "HTML speichern". Diese Funktion speichert das aktuelle DOM in einer lokalen Datei, dh, wenn Sie das DOM irgendwie bearbeiten, z. Wenn 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.

3
Rahul

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 auf einer Website, die auf einem Remotecomputer gehostet wird

In diesem Fall würden Sie die FTP-Details und den Speicherort des CSS/HTML/Javascript angeben, und Firebug würde diese Dateien dann aktualisieren, wenn Sie Ihre Änderungen speichern. Es kann sogar in der Lage sein, die Dateien selbst zu lokalisieren und Sie dann aufzufordern, zu überprüfen, ob die richtige Datei vorliegt. 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 Speicherort des lokalen Ordners der Website mitteilen und das gleiche Verhalten verwenden, um die Dateien abzugleichen und zu überprüfen. Der Zugriff auf das lokale Dateisystem kann bei Bedarf über FireFTP erfolgen.

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

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


Ein zusätzliches Feature wäre die Möglichkeit, Projektdateien zu speichern und zu öffnen, in denen die Zuordnungen zwischen den lokalen Dateien und den ihnen zugeordneten URLs gespeichert sind, sowie die FTP-Details zu speichern, wie dies FireFTP bereits tut.

3
Jonathan Parker

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

CSS-X-Fire gibt Änderungen an den CSS-Eigenschaften von Firebug an IDE, wo 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 vom Browser heruntergeladenen Dateinamen und Inhalte Bescheid wissen (siehe NickFitz-Kommentar im ursprünglichen Beitrag).

Szenario 1: Sie haben eine Website (Projekt) mit einer Handvoll Themen, aus denen der Benutzer auswählen kann. Jedes Theme hat eine eigene CSS-Datei, aber Firebug kennt nur eine, 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 werden möglicherweise aus mehreren Dateien zusammengeführt, und die Dateinamen ändern sich möglicherweise. CSS-X-Fire kümmert sich nicht um die Namen der Dateien, sondern nur um CSS-Selektornamen und deren Eigenschaften.

Oben sind Beispiele für Szenarien aufgeführt, 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. Projektstartseite: http://code.google.com/p/css-x-fire/

3

FireFile

Firebug wurde erstellt, um ein Problem zu erkennen, das kein Debugger ist. Änderungen können jedoch gespeichert werden, wenn Sie ein neues Tool hinzufügen, das Firebug in Änderungen speichern 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 eine kleine PHP Datei auf der Serverseite hinzugefügt wird.

3
nasir

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 zurück an den Server sendet und diese speichert.

Backfire verwendet eine einzige Javascript-Datei und das Quellcode-Paket enthält ein funktionierendes .NET-Server-Implementierungsbeispiel, das problemlos auf andere Plattformen portierbar ist.

2
Martin Kool

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

2
Ólafur Waage

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 spiegelt automatisch CSS-Änderungen wider, ohne sie erneut 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 der gleichen 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 dürfen Sie ein einzelnes Element bearbeiten, für das möglicherweise kein Selektor id vorhanden ist. Selbst wenn Sie das generierte CSS aus dem Webinspektor kopieren und einfügen könnten, müsste es ein id generieren, um den CSS-Bereich zu bestimmen. So etwas wie:

#element-127 {
  background: red;
}

Das würde anfangen, deine CSS in Unordnung zu bringen.

Sie können dies umgehen, indem Sie nur die Stile für einen vorhandenen Selektor ändern (den Klassen-Selektor .space Im folgenden Bild des Webkit-Inspektors).

Webkit Inspector

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

Ich bleibe lieber bei TextMate.

Das Ideal wäre, einfach das CSS 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 Ihre endgültige 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 zu aktualisieren. Auf diese Weise könnten Sie anfangen, Mixins wie box-shadow() zu erstellen, die die Komplexität abstrahieren, was der Webinspektor definitiv nicht kann.

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

  • LiveReload : Drückt CSS ohne Aktualisierung auf den Browser, wenn Sie auf Speichern klicken, aber es ist eine Mac-App , daher ist das Anpassen schwierig.
  • CodeKit : Auch eine Mac-App, die den Browser jedoch bei jedem Speichern aktualisiert.

Der Hauptgrund, warum ich sie nicht verwendet habe, ist, dass ich nicht in der Lage bin, die Art und Weise, wie diese Arbeiten ausgeführt werden, einfach anzupassen.

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

  1. Der Browser spiegelt die CSS/JS/HTML/etc jedes Mal, wenn Sie speichern, ohne die Seite neu zu laden
  2. Es kann mit jeder Vorlage/Sprache/jedem Framework (Stylus, Less, CoffeeScript, Jade, Haml usw.) umgehen.
  3. Es ist in JavaScript geschrieben und Sie können Erweiterungen in JavaScript ganz schnell zusammenfügen.

Auf diese Weise können Sie, wenn Sie diese kleinen Änderungen an CSS vornehmen müssen, sagen, Hintergrundfarbe einstellen, Speichern drücken, Nein, 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 arbeiten die Erweiterungen) und die Daten über Websockets an den Browser zu übertragen, die dann verarbeitet werden (auf der Clientseite von) die Erweiterung).

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

Hoffentlich hilft das.

2
Lance Pollard

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

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

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

2
Mathletics

Ich habe mich gefragt, warum ich den Text nicht verdammt gut auswählen und vor meinen Augen kopieren kann. Besonders wenn andere sagen, man könne einfach "auswählen und kopieren". Stellt sich heraus, dass Sie können , müssen Sie nur das Ziehen außerhalb eines beliebigen Textes beginnen (dh in der Dachrinne über oder zu der links vom Text) wie bei jedem Mausklick oder Ziehen auf einen Text wird sofort der Eigenschafteneditor aufgerufen. Sie können auch außerhalb von 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, aber zumindest erspart es Ihnen, den gesamten Inhalt der CSS-Datei manuell zu transkribieren. Lassen Sie einfach Ihr Diff-Programm Änderungen im Leerraum ignorieren, wenn Sie mit dem Original vergleichen.

1
Leon

Sie können eine eigene Serverskriptdatei 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 auf die Informationen von Firebug zugreift und die nützlichen Daten abruft, wäre der schwierige Teil.

Ich persönlich bitte lieber das Entwicklerteam von Firebug, eine Funktion bereitzustellen, es sollte nicht zu schwer für sie sein.

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

1
Mihai Stancu

Zitiert aus die 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 wie das Herausnehmen der Gurken und das Hinzufügen von Senf zu einem Restaurantsandwich: Sie können das Ergebnis genießen, aber der nächste Kunde im Restaurant erhält weiterhin Gurken und keinen Senf.

    Dies ist eine lang ersehnte Funktion, die eines Tages direkt bei Firebug erhältlich sein wird. In der Zwischenzeit können Sie versuchen Firediff , eine Erweiterung für Firebug von Kevin Decker.

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

    Diese Funktion wurde in Kevin Deckers Firediff implementiert.

1
James

Firebug arbeitet mit dem berechneten CSS (das Sie erhalten, indem Sie das CSS in den Dateien übernehmen und die Vererbung anwenden usw. sowie die mit JavaScript vorgenommenen Änderungen). Dies bedeutet, dass Sie es wahrscheinlich nicht direkt zum Einbinden in eine HTML-Datei verwenden können, die browser-/versionsspezifisch ist (es sei denn, Sie interessieren sich nur für Firefox). Andererseits verfolgt es, was original ist und was berechnet wird ... Ich denke, es sollte nicht sehr schwierig sein, einige JS zu Firebug hinzuzufügen, um dieses CSS in eine Textdatei exportieren zu können.

1
Ryszard Szopa

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 Editor und bearbeiten Sie die Seite von dort aus, wenn Sie wissen, dass HTML es einfach sein wird. Speichern Sie nach Abschluss der Bearbeitung die Datei und öffnen Sie die Webseite erneut. Die Änderungen sollten vorhanden sein, wenn sie korrekt vorgenommen wurden. Sie können dann Ihre neue bearbeitete Seite verwenden und sie exportieren oder an Ihren Remotestandort kopieren

0
mjk

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 Optionsschaltflä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.

Edit: sieht aus wie Mark Biek hat eine schnellere Version

0
sblundy