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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    How is this even useful? The inspect button is much more practical if what you are trying to do is view and edit a specific piece of the page.

  • Anonymous

    @Anonymous, I think ths power would really come in if searching for a class or a tag. Yes, if searching for an element with an ID, inspect element is more useful. But if you wanted to find all anchors with a certain class that could be spread throughout a page, I can see how that could be useful.

  • amado

    I haven’t used this but I can see how it can be useful when tracing elements in conjuction with ajax.