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

Question

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 .

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

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

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.

I just released a firebug addon at the mozilla addon sandbox which might quite do what you want: https://addons.mozilla.org/en/firefox/addon/52365/

It actually saves the "touched" css files on demand to your web server (by communication with a one-file webservice php script).

Documentation can be found at my homepage or on the addon page

I would appreciate any testing, bug reports, comments, ratings, discussion on this, as it's still in early beta, but should already work fine.

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.

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