Firefinder Adds Search to Firebug

FirefinderEveryone loves the Firebug, and one of the nicest things about it is that it’s more than just an extension — it’s an extension framework. Many of you will already be well aware of our CodeBurner reference tool for Firebug and Yahoo!’s YSlow performance monitor has been a mainstay for many developers for a long time.

Robert Nyman has come up with a really nice addition to the list — Firefinder for Firebug.

After installing Firefinder, you’ll find a shiny new tab in your Firebug with a friendly search box. Want to know where a particular ID is being used in a page? Enter the ID (I’ve used ‘#feature’ in the example below) and hit return and you’ll see:

  • the element highlighted inline with a red dashed line
  • the associated code snippet is listed below

Enter any ID, class or HTML element to see it highlighted in the page and listed in the firefinder panel.

Likewise HTML elements and classes can be searched for and highlighted just as easily. Hovering over the matching elements list switches that elements highlights that element in blue, which is handy for isolating specific divs sharing common classes in complex pages.

If you want to be really tricky, you can even target elements via their XPath.

Obviously Firefinder isn’t supposed to be a replacement for the Firebug’s default interface, but it’s a really nice augmentation. Check it out.