Why can't I save CSS changes in Firebug? [closed]

Answer 1

I think the closest you're going to get is by going into Edit mode in Firebug and copying and pasting the contents of the CSS file.

Answer 2

CSS-X-Fire

I'm surprised that it still not listed to this question, but probably because is new and the author didn't have time to promote it yet.

It is called CSS-X-Fire and it is a plugin for JetBrains series of IDEs : IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine.

How it works: You install one of these IDEs and configure the deployment (supports FTP and SCP). This will allow you to stay in sync with the server.

After this you install this plugin. When it starts it will ask tell you that he will install a plugin for Firefox, in order to do the integration between Firebug and the IDE. If it fails to install the plugin, just use the drag-n-drop technique to install it.

Once installed it will track all your changes from Firebug and you will be able to apply them with a simple click inside de IDE.

FireFile

FireFile is an alternative that requires you to add one small php file to the server side in order to be able to upload the modified css.

Answer 3

You could write your own server script file that takes a filename parameter and a content parameter.

The server script would find the requested file and replace its contents with the new one.

Writing the Javascript that taps into firebug's info and retrieves the useful data would be the tricky part.

I'd personally rather ask the dev team at firebug to supply a function, it shouldn't be too hard for them.

Finally, Ajax sends the filename/content pair to the php file you created.

Answer 4

I am the author of CSS-X-Fire which Sorin Sbarnea also kindly posted about in this thread. Guess I'm a bit late ;)

CSS-X-Fire emits CSS property changes from Firebug to the IDE where the changes can be applied or discarded.

There are a couple of advantages with this solution over most of the other existing tools which only know know about the filenames and the content downloaded by the browser (see NickFitz comment in the original post).

Scenario 1: You have a website (project) which has a handful of themes from which the user can select from. Each theme has its own CSS file but only one is known to Firebug, the current one. CSS-X-Fire will detect all matching selectors in the project and let you decide which should be modified.

Scenario 2: The web project has stylesheets created compile-time or during deployment. They might be merged from several files and the file names may change. CSS-X-Fire doesn't care of the names of the files, it only deals with CSS selector names and their properties.

Above are examples of scenarios where CSS-X-Fire excels. Since it works with the source files, and knows about the language structure, it also helps to find duplicates not known to Firebug, jump-to-code, etcetera.

CSS-X-Fire is open source under the Apache 2 license. Project home: http://code.google.com/p/css-x-fire/

Answer 5

Quoted from the Firebug FAQ:

Editing Pages

• Can I save to the source the changes I made to the webpage I'm seeing?

  Right now you can't. As John J. Barton wrote on the newsgroup:

  Editing in Firebug is kinda like taking out the pickles from and adding mustard to a restaurant sandwich: you can enjoy the result, but the next customer at the restaurant will still get pickles and no mustard.

  This is a long-requested functionality, so someday it'll be available directly from Firebug. Meanwhile, you can try Firediff, an extension for firebug by Kevin Decker.

• How can I output all changes that have been made to a site's CSS within firebug?

  That's a feature implemented in Kevin Decker's Firediff.