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

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 its 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.

Here's hoping someone has a nice solution...

EDIT 2: The Official Group has a lot of questions, but no answers.

+2  A: 

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.

Ólafur Waage

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?

Not sure why you've been downvoted, but +1 from me: one of the major reasons people keep asking for this almost-impossible feature is that they don't appreciate the difference between a debugger and an editor.
Firebug was created to solve a problem not to be a debugger. If there is another problem that needs solving then why can't it be added to Firebug?
Jonathan Parker
Sure, Firebug is a debugger, but why does is let you edit CSS for instance? Who says a debugger shouldn't be able to save the result of altered output? My impression is that Firebug is just so many things to so many people. For some, using the debugger and stepping in and out of functions, etc. is the main thing – still, for some others, its capability of altering CSS with live updating is the main deal.
+7  A: 

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.

Mark Biek
That was the solution I was looking for... I love obvious answers I've never noticed before. Cthulu curses StackOverflow in all its guises, for the madness it prevents.
BAH... that doesn't work.... that is the original source... and it wiped out all my changes.
+3  A: 

Why don't you ask the authors? Or better yet, add the functionality yourself, its open source!

I'd find this feature handy sometimes too. I'm sure you're not alone, Dean!
At the very least, Firebug should be able to output the differences -- then you can work out where to put the CSS yourself.
++Shermozle. A diff would be exquisite.
+9  A: 

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

Craig Angus
You can link FireBug to eclipse? Amazing! FireBug and Eclipse are the main tools I use in development. I will look into this. Thanks!

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

How about combining: use Mark Biek's solution to copy and past, but use Eduardo Molteni's solution and paste it in to developer tools and save. That's what I'm going to do for now. Would be nice if this was added to FB!
+1  A: 

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.

Ryszard Szopa
This isn't entirely true. Firebug shows you all of the styles that apply to an element, including where they came from, and just strikes through them if they've been superseded by a more specific/later/important rule. It lets you change/add rules at any level. You also have the option to view just the computed styles, but the default view is to show all styles.
+9  A: 

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.

alt text

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 do use the web developer plugin. But I just tried looking for the option and couldn't find it. How do I save the new stylesheets?
+2  A: 

Use the CSS editor in the Firefox Web Developer toolbar:


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


You could write your own server scrip 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 tapps into firebug's info and retrieves the usefull data would be the tricky part.

For i'd personally rather ask the dev team at firebug to supply a function, it should't be too hard for them.

And finaly Ajax sending the filename/content pair to the php file you created.

+2  A: 

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.

+1  A: 
+1  A: 

Not sure why you've been downvoted, but +1 from me: one of the major reasons people keep asking for this almost-impossible feature is that they don't appreciate the difference between a debugger and an editor.

why not having both in one? is that so hard to make?

+5  A: 

I just released a firebug addon at the mozilla addon sandbox which might quite do what you want: https://addons.mozilla.org/de/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.

thanks in advance, Tobias

Tobias Strebitzer
I'll check it out!

I want change website table color with FireBug, but when im refreshing website.. All backs to normal..

Its possible to save this?

That was pretty much my original question...
+38  A: 

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 .

Morten Bergfall
Nice. A Winner is You.
Such a little tool, so many man-hours saved, we are all winners today ;-) Cheers to the author off FireDiff, seems he doesn't traverse the waters of SO.ToDo : mail author, express gratitude
Morten Bergfall
The author is Kevin Decker. Could be this user: http://stackoverflow.com/users/238459/kevin-decker
Jonathan Parker
Yes it is this user as the link to his site is the same.
Jonathan Parker
sweet mother of god. this is awesome.
I feel you Jason, I feel you... ;-)
Morten Bergfall
+ 1 useful info
just to complete the circle : http://stackoverflow.com/users/238459/kevin-decker
Morten Bergfall
+2  A: 

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.

Jonathan Parker
Sounds great, i'll try it out!

Your all using the wrong tool! http://www.skybound.ca/ My favourite companion! (although I still use firebug a little)

MAC version coming soon :)
+1  A: 

Firebug was created to detect a problem not to be a debugger. but you can save change if you add new tool that integrate firebug with save changes. it is firefile, click here http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html


Here's a short video tutoral about the tool itself and using some basic features: http://www.litfuel.net/plush/?postid=161

If you google it, I am sure you would find a great deal more.

Mohit Kumar
+4  A: 

We just introduced Backfire, an open source javascript engine that allows you to save CSS changes made in Firebug and Webkit inspector to the server. The library includes an example C# implementation of how to save the incoming changes to your CSS.

Here's a blog post about how it works: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

And here's the code hosted at Google Code: http://code.google.com/p/backfire/

Looks awesome. And for the WebKit Web Inspector too? Yay!
+1  A: 

Use Backfire.


It's an open source solution that sends CSS changes back to the server and saves them.

Backfire uses a single javascript file, and the sourcecode package has a working .NET server implementation example that is easily portable to other platforms.

Martin Kool
+3  A: 

Like others I was looking for a good solution for doing the entire round-trip with html/css modification but today I found one.

I'm surprised that it still not listed to this question, but problably because is new and the author didn't had 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.

CSS-X-Fire window inside the IDE.

Sorin Sbarnea
Nice find! But I wonder if there's any similar conduit between Firebug and other Mac IDEs or editors than IntelliJ's.

I am the author of CSS-X-Fire which Sorin Sbarnea also kindly posted about in this thread. Guess I'm a bit late ;)

CSS-X-Fire emits CSS property changes from Firebug to the IDE where the changes can be applied or discarded.

There are a couple of advantages with this solution over most of the other existing tools which only know know about the filenames and the content downloaded by the browser (see NickFitz comment in the original post).

Scenario 1: You have a website (project) which has a handful of themes from which the user can select from. Each theme has its own CSS file but only one is known to Firebug, the current one. CSS-X-Fire will detect all matching selectors in the project and let you decide which should be modified.

Scenario 2: The web project has stylesheets created compile-time or during deployment. They might be merged from several files and the file names may change. CSS-X-Fire doesn't care of the names of the files, it only deals with CSS selector names and their properties.

Above are examples of scenarios where CSS-X-Fire excels. Since it works with the source files, and knows about the language structure, it also helps to find duplicates not known to Firebug, jump-to-code, etcetera.

CSS-X-Fire is open source under the Apache 2 license. Project home: http://code.google.com/p/css-x-fire/

Ronnie Kolehmainen

A very easy way to "edit" your page is to go onto the site via your internet browser. Save the page as html only onto your desktop. Go to your desktop and right click on the new web page file and select open with, choose notepad and edit the page from there, if you know html it will be easy. After all your editing is done, save the file and reopen your webpage, the changes should be there if done correctly. You can then use your new edited page and export or copy it to your remote location

True, but I think the question is how to save CSS files with changes made in Firebug applied to them.