Why can't I save CSS changes in Firebug?

Been wondering the same for quite some time now,
just gut-wrenching when your in-the-moment-freestyle-css'ing with firebug gets blown to bits by
an accidental reload or whatnot....

For my intents and purposes, I've finally found the tool.... : FireDiff.

It gives you a new tab, probably some weird David Bowie reference, called "changes"; which not only allows you to see/save what firebug, i. e. you, have been doing,
but also optionally track changes made by the page itself....if it and/or you are so inclined.

So thankful not having to re-type, or re-imagine and then re-re-type, every css rule I make...

Here is a link to the developer (don't be disparaged by first appearance, mayhap just as well head straight over to the Mozilla Add-On repository .

The Web Developer add-on let's you save your edits. I'd like to combine the editing of Firebug with the Save feature of Web Developer.

_{(source: mozilla.org)}

Use the "Save" button (click CSS menu -> Edit CSS) to save the modified CSS to disk.

Recomendation: Use the "Stick" button to prevent losing your changes when you change the tab for doing other browsing. If it is possible, use only one tab to do the edit and other firefox window the related searches, webmail, etc.

You could link firebug to eclipse with fireclipse and then save the file from eclipse

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.

I know this doesn't answer your question, but surprisingly, Internet Explorer 8's Firebug clone "developer toolbar" (accessible via F12) offers the option to "save html". This function saves the current DOM to a local file, which means that if you edit the DOM somehow, e.g. by adding a style attribute somewhere, this will be saved too.

Not particularly useful if you're using Firebug to mess around with CSS like everyone does, but a step in the right direction.

I propose a solution that involves a combination of Firebug and FireFTP as well as code that directly accesses the local file system when running a website locally.

Here are the scenarios:

Working on a website that is hosted on a remote machine

In this case you would provide the FTP details and the location of the CSS/HTML/Javascript and Firebug would then update these files when you save your changes. It may even be able to locate the files itself and then prompt you to verify that it has the correct file. If file names are unique it shouldn't be a problem.

Working on a website running on your local machine

In this case you could provide Firebug with the local folder location of the website and the same behaviour would be used to match and verify the files. The access to the local file system could be performed through FireFTP if necessary.

Working on a website hosted remotely without FTP access

In this case something like the FireFile add-on would have to be implemented.

An additional feature would be the ability to save and open project files that store the mappings between the local files and the URLs they are associated with as well as saving the FTP details as FireFTP already does.

Since Firebug is not working on your server but taking the CSS from the site and storing it locally and showing you the site with those local changes.

Use the CSS editor in the Firefox Web Developer toolbar:

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

It's got enough good stuff to use in conjunction with Firebug, and it lets you save your CSS out to a text file.

Firebug works on the computed CSS (the one which you get by taking the CSS in the files and applying inheritance, etc. plus the changes made with JavaScript). This means that probably you couldn't use it directly to include in an HTML file, which is browser/version specific (unless you care only about Firefox). On the other hand, it keeps track of what is original and what is computed... I think it should not be very difficult to add some JS to Firebug to be able to export that CSS to a text file.

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.

Here's a partial solution. After you make your changes, click on one of the links to the relevant file. This is the original file, so you'll have to refresh the file, which is under the options menu button in the upper right of the firebug pane. Now you have the modified css page, which you can copy & paste. Obviously, you'll have to do it for each css file.

Edit: looks like Mark Biek has a quicker version

Actually Firebug is a debug and analyze-Tool: not an editor and obviously not considered to be one. The other reason was already mentioned: how to you want to change CSS, stored on a server when debugging a webpage?