Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Using Firebug to edit CSS, how do I save/export changes made to the CSS?

TOOLS: Firefox, Firebug


MAJOR UPDATE: If you know of a way to lock the forward/back/refresh on a FireFox tab, please let me know. Otherwise, I've given up on using FireBug/FireDiff as an IDE for CSS, it's nice, but lol... press backspace at the wrong time and ALL your work is gone... funny. So, really like the browser highlighting to CSS/HTML in Firebug. Know any good CSS editors that do this? Really had hope FireBug would work, but for now only see it as being good for ad-hoc inspection and test; meaning using it for what it's made for.


UPDATES:

@Lèse majesté: Just as an update, "Web Developer add-on" does let you edit CSS, but it does not let you edit/save CSS changes made by Firebug. Meaning you use Firebug to ID and maybe test changes, but it does not let you save the changes from Firebug. Here's a "how to" covering how to use them together: FF + FB + WD

@Lèse majesté: Still playing around with FireDiff. It works okay, found one bug already (although I'm just working around it), and there's no "how to" I've been able to find, so I'm just trying every feature and clicking around... (for example, to export a diff you must be over the last item in the list, right click, and select as "Save Diff". The ".diff" is just a text file, no idea why at this point the ext is .diff.

share|improve this question

4 Answers 4

up vote 10 down vote accepted

There is actually a FireBug plugin called FireDiff that lets you export style and DOM changes.

Alternatively, you could use the Web Developer add-on to save the CSS.

Lastly, FireBug can be linked to Eclipse using Fireclipse, and from there save the CSS.

See this StackOverflow question for more solutions.

share|improve this answer
    
Lèse majesté: Cool, thanks! –  blunders Oct 16 '10 at 12:57
    
Thank you indeed. –  John Conde Oct 16 '10 at 14:26
    
@Lèse majesté: See comment above on using Web Developer add-on to edit Firebug CSS, thanks! –  blunders Oct 16 '10 at 17:30

I'm pretty sure Firebug doesn't log the changes so you'll have to get a little creative to do this. You can copy the HTML/CSS and paste it into a txt file. Then you can using comparison software to identify the changes you made. The text editor I use has this functionality built in but I'm sure the are plenty of options available.

share|improve this answer

You're looking for Backfire, a client/server script (currently javascript/C#). It doesn't require Firebug (it's not a Firebug addon), and it works in both Firefox and Webkit-based browsers. With Backfire you can change the page's state any way you want (Firebug is a great way) and then click the Save button to save the changes to the server.

In terms of implementation, after clicking save your server-side code will receive a post containing a list of changes, and when you download Backfire you'll see an example implementation showing you how to store the changes in your CSS files. It works across multiple files and (in Firefox) with shorthand CSS rules, etc, all while maintaining the structure of your original CSS files.

share|improve this answer
    
(+1) Cool, thanks! How does it hook into the code? Does is just work with flat files, or can it be setup to talk to a version control system without writing custom code? Also guessing that means I've got to be running dot.NET in the background on the server too, right? –  blunders Nov 2 '10 at 10:57
    
@blunders It's open source so you can check out how it works yourself. Basically it sends a list of changes to the server in json format and that data is parsed using regular expressions and matched against the original line in the css file. Then the css file is updated with the new data. The example implementation is .NET, but any programmer can easily write a similar one in PHP or something else as it's quite trivial. –  Rahul Nov 2 '10 at 13:31

Use cssUpdater (first real hit when googling "how to save firebug changes"). With it, you can save your FireBug changes (even with FTP support) with just one click from FireBug. More info at http://cssUpdater.com

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.