Firefinder for Firebug – an extension to quickly find elements matching your CSS selectors or XPath expressions
I am very happy to say that an idea I’ve had for a while has finally been implemented: Firefinder for Firebug.
Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.
It also offers you a count of how many matches there are – good for checking, for instance, the number of heading elements – and it also lists all the matching in a collapsible list in the Firefinder panel in Firebug. When you hover each item in that list, the corresponding element in the web page will be highlighted so you see which one it is.
If you are in a web page and want to quickly use Firefinder, just press Ctrl + Shift + V on PC/Linux, Command + Shift + V on Macs, and the Firefinder panel will become visible and you can type away immediately.
Download
Download Firefinder for Firebug and get started!
Discussion/support
Have any problems, questions or suggestions? Visit the Firefinder Google discussion group.
[…] An extension to Firebug to quickly find elements matching your CSS selectors or XPath expressions. Nice! As an alternative one could of course hook jQuery via a bookmarklet and then type some selector s(h)izzle into the regular console. Spread the word! […]
Installing that seemed to disable the 1password plugin (no thourogh debugging done)
Johan,
Hmmm…
Not sure how that is implemented, especially since it's not a Firefox extension, per se, but an installed operating system application.
In what way is it disabled?
Great stuff, I just installed your extension to test it – looking good so far. Thank you! 🙂
Cool! This could be very useful.
Good idea, and nice implementation, Robert!
Aki, David, Jonatan,
Thank you, I appreciate it!
Hi Robert, did you use css2xpath transformer for this?
Andrea,
Ah, no, this is more about the option for the developer to type in CSS or XPath, depending on what they like or want to test/use.
Like the idea of the transformer, though, it could become very useful in another context!
[…] Vía / Robert’s talk […]
It would be great if instead of expanding/collapsing the element content, it would "inspect" it.
Keep up the great work, this extension is a great complement to Firebug!
Rémi,
Thank you!
I have been experimenting with that, and have had it to work in a test version – I have some plans for the future for Firefinder, so we'll how it turns out. 🙂
[…] Firefinder for Firebug – an extension to quickly find elements matching your CSS selectors or XPath … […]
This is an awesome enhancement. Thanks for creating it!
Will,
Thank you, glad you like it!
[…] ??? plug in ??? plug in Firebug (???? ??? ?????;) ?????? ??? ????? Firefinder, ??? ??????????? ?? ?????? ??? (??????;) (X)HTML. ???? […]
[…] yet another very useful tool created by Robert Nyman. For more info check out Robert’s blog post Firefinder for Firebug – an extension to quickly find elements matching your CSS selectors or XPath ….Posted in CSS, […]
[…] FireFinder is yet another very useful tool created by Robert Nyman. For more info check out Robert’s blog post Firefinder for Firebug – an extension to quickly find elements matching your CSS selectors or XPath …. […]
Thank you Robert, grate idea, looks really helpful at first try, looking forward for new versions.
As a first time visitor to your blog, I must say there's more for me to see here.
Benny,
Thank you it makes me glad to hear! 🙂
Excellent idea. I'll be using it, for sure.
Thanks, Robert.
Richard,
Thank you!
Very cool. Thank you!
John,
Glad you like it!
[…] 12: Firefinder for Firebug – an extension to quickly find elements matching your CSS selectors or … […]
Would be nice to have power like this pour into AdBlock (blocking or hiding), RIP, or yarip
help us oh be one
normal users,
Yes, it would be nice, but no planned co-operation as of right now, at least.
CTRL + SHIFT + V
This does not work!!!!
This merely brings up a list from Adblock Plus 🙁
Add on deleted.
Mark,
As you can probably gather with the thousands of Firefox extensions available, there's bound to be several using the same keyboard shortcuts.
Which one takes precedence depends on install orders and other factors. To use Firefinder, you can also open Firebug, go to the Firefinder tab and use it from there.
I can't open the Firefinder tab. Why is this so? I try go tools and clicked on "show firefinder for firebug" but nothing came out. Need some help here. thanks
Shawn,
make sure you have the latest version of Firebug as well, just to make sure. Also, please try by activating/showing Firebug first, and then go to the Firefinder panel.
Thanks. It works after that. Thanks Robert^^ and its useful too
Shawn,
Great! 🙂
Guys I need help. I have just installed firefinder with firefox 3.5.6 and seems that SHOW firefinder for firedebug wont come out under TOOLS or even Ctrl+Shift+V. Any help would be appreciated. Thanks!
Ferris,
First, make sure you have the latest version of Firebug and Firefinder; under those circumstances, it should work. Worst case, you need to show Firebug first by clicking its icon, and then go to the Firefinder panel.