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.


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


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, ie 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.

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.

链接地址: http://www.djcxy.com/p/41904.html

上一篇: 适用于Java的Eclipse IDE

下一篇: 为什么我无法将CSS更改保存在Firebug中?