Search code examples
cssfirebug

Why can't I save CSS changes in Firebug?

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

  • 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