Friday, May 22nd, 2009
Firefinder: Quick access to what you are looking for
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
4.3 rating from 33 votes
i totally need this
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.
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?
+1 vdidenko
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.
Firebug is my hero
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
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!
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
vdidenko,
The highlighting is intentional, to get a visual match between the logged node and the actual HTML element matching it. :-)