Everyone 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
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 WalkerAlex 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. Co-author of The Principles of Beautiful Web Design. 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 60+ of SitePoint's book covers.
