Skip to main content

Firefinder Adds Search to Firebug

By Alex Walker



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.

New books out now!

Get practical advice to start your career in programming!

Master complex transitions, transformations and animations in CSS!

Latest Remote Jobs