How do you save or export changes made in Firebug?

Question

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

TOOLS: Firefox, Firebug

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 if you press backspace at the wrong time, 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.

"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

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.

Solution 1

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 Stack Overflow question for more solutions.

Solution 2

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.

Solution 3

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

Solution 4

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.

View more solutions

Comments

[Cesar]

@Lèse majesté: See comment above on using Web Developer add-on to edit Firebug CSS, thanks!

[Cesar]

(+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?

[Rahul]

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