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

Firebug is the most convenient tool I've found for editing CSS - so why isn't there a simple "save" option for CSS?

I am always finding myself making tweaks in Firebug, then going back to my original .css file and replicating the tweaks.

Has anyone come up with a better solution?

EDIT: I'm aware the code is stored on a server (in most cases not my own), but I use it when building my own websites.

Firebug's just using the .css file Firefox downloaded from the server, it knows precisely what lines in which files it's editing. I can't see why there's not an "export" or "save" option, which allows you to store the new .css file. (Which I could then replace the remote one with).

I have tried looking in temporary locations, and choosing File > Save... and experimenting with the output options on Firefox, but I still haven't found a way.

EDIT 2: The official discussion group has a lot of questions, but no answers.


Solution 1:

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 .

Solution 2:

I got here looking exactly for this feature, that is, being able to save edited CSS properties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updater but you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):

Change CSS and SAVE on local file system using Chrome Developer Tools

enter image description here

I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)

Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded

I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)


[Update 1]

Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress) Looks promising indeed.

[Update 2]

If you happen to be using Visual Studio 2013 with Web Essentials you'll be able to sync CSS automagically as shown in this video:

Web Essentials: Browser tools integration