Friday, May 22nd, 2009

Firefinder: Quick access to what you are looking for

Category: Debugging, Firefox, Utility

<p>

Robert Nyman has a new Firebug extension called Firefinder.

The idea is to quickly text CSS selectors/XPath in a document to see what will match, or how many instances of a certain element there are (thinking certain type of heading, for instance).

It offers:

  • A quick way to filter HTML elements via CSS selector(s) or XPath
  • Highlight them in the document
  • List them in the Firebug panel in a collapsable list
  • A count of the total matching number of elements

Related Content:

Posted by Dion Almaer at 7:23 am
10 Comments

++++-
4.2 rating from 38 votes

10 Comments »

Comments feed TrackBack URI

i totally need this

Comment by jwlrs — May 22, 2009

I can see how this would be useful, but it would be much better if double clicking on a dom node took you to the HTML tab.

Also, incremental searches would be good.

Comment by sos — May 22, 2009

I completely do not see a point in developing a whole plugin for this. Seems to be much simpler to user jQuerify (http://www.learningjquery.com/2006/12/jquerify-bookmarklet) or a similar boorkmarklet from your favorite library . The go to the Firebug console and have a blast with selectors.

What do I miss?

Comment by vdidenko — May 22, 2009

+1 vdidenko

Comment by Darkimmortal — May 22, 2009

As quick shortcut, type $$(“css-selector”) in the FireBug console and press enter to get all the matching elements as clickable set. $$ is an inbuilt helper from FireBug, known & adopted from prototype/mootools.

Comment by digitarald — May 22, 2009

Firebug is my hero

Comment by tack — May 22, 2009

You can also filter elements using xpath with $x(). There is actually a lot of ‘hidden’ features in the command line api. Take a look at http://getfirebug.com/commandline.html

Comment by janjarfalk — May 23, 2009

I’m Robert, developer of Firefinder.

sos,

Absolutely, and I’m looking into tighter integration with Firebug’s features in upcoming versions.

vdidenko,

Nothing wrong with jQuerify or the console in Firebug and its supported commands. Personally, though, I feel that having it as a separate panel dedicated to such features makes it easier to use/more customizable, and definitely a great ground for future enhancements.

Also, in my humble opinion, the console and it’s listing isn’t as easy to use for this specific purpose, and it won’t mark/highlight anything in the actual document.

This is step one with Firefinder, and I definitely have some interesting ideas for the future. :-)

janjarfalk,

Glad that you bring that up! Firebug has lots of great features!

Comment by robnyman — May 23, 2009

Robert,

It’d be very interesting to see what steps two and beyond look like. Usage patterns, skills and individual preferences differ, so I can see how the current functionality may possibly find audience.

Speaking of highlighting, FWIW, my install of Firebug highlights logged nodes in the document, when I hover then in the console.

Vlad

Comment by vdidenko — June 1, 2009

vdidenko,

The highlighting is intentional, to get a visual match between the logged node and the actual HTML element matching it. :-)

Comment by robnyman — June 18, 2009

Leave a comment

You must be logged in to post a comment.