News & Info

Daily Updates and Tech Chatter

Firediff: See exactly what you’ve changed in Firebug

Firediff Screenshot

If you use the Firebug add on for Firefox, you also want Firediff, which is a plugin for Firebug itself.

In Firebug, once you’ve done a lot of tweaking and editing to get the site looking right in the browser, there is no way in the current version (1.5) of Firebug to see a list of just the edits you have made. It’s very difficult to find every last change and make those same changes in the code.  That’s what Firediff is for. You make all your edits, and then see a handy list of exactly what you changed. You can see a sequential log, or a color coded version of the file with all your changes highlighted.

In case you don’t know, this is completely awesome, and has been sorely lacking in Firebug.

Firediff stops just shy of producing a usable patch file for updating your source code. However, it will show you a very useful visual diff to use for reference as you edit the source file yourself. It is far from obvious how to get it. Here’s the trick. After a bunch of experimental editing to a stylesheet in Firebug, clicking on “Changes” (the Firediff tab) gets you a change log.  You see every time you turned an attribute on or off, and every other little change you made along the way. This is not very useful. You may have a list of 150 things you did, when all you care about is the five things you eventually ended up with. You don’t care that you changed the font size 25 times; you only care about the final font size.

To see that end product, scroll all the way down to the last entry in the list of changes, right click it, and click “Show snapshot”. This will show you a highlighted version of the file, with your additions and subtractions in green and red, respectively – just like in the screenshot for this article.

This is the most useful view within Firediff.

Once you install Firediff, be sure to check the “Show Firebug changes” option on the “Changes” tab, in order to see only your changes. Otherwise, you’ll see every change made by every bit of JavaScript on the site.

So go get Firediff. You can find it on the Firediff project website (which may have more recent releases) or the Mozilla Addons site.

Tags: , ,

1 Awesome Comments So Far

Don't be a stranger, join the discussion by leaving your own comment
  1. Jeremie
    April 24, 2013 at 6:49 PM #

    Thanks for pointing out where the firediff changes are!!
    Took me 10 mins and 3 websites to find it! ;-)