When I released Firefinder back in May, I had some ideas with what more I wanted to do with it. Now I can happily say that I have implemented those ideas!

New features and changes

I have implemented both a number of new features and gotten a better integration with Firebug with this release, and they are:

Code collaboration with the FriendlyFire feature

The number one thing I wanted to incorporate in this version was an idea which came from Remy Sharp, where he knew I have developed a few Firefox extensions. He brought up the idea of being able to share code from within Firefox with other web developers, and I immediately jumped at the idea.

The new code collaboration feature is entitled FriendlyFire, and is quite easy to use. You use Firefinder and any of its various ways to select an element in the current web page. In the results listing, just click on the FriendlyFire link to send that element’s code to a pastebin service, JS Bin (graciously hosted and run by Remy), to share your code online. You will get a URL back to share with colleagues and friends – much more efficient than using e-mail or instant messaging.

JS Bin offers code highlighting, an additional tab for JavaScript (where you can also include any of the most popular JavaScript libraries), and an output tab where you will see how that code will behave in practice.

Support for auto-selecting element when hovering the page

In style with the feature for selecting HTML elements with Firebug, you can now turn on the Auto-select feature in Firefinder to make it automatically select the one you’re currently hovering over with your mouse. Click desired element to lock it to that selection.

Support for context menu click

For those who prefer the context menu, just right-click (or left, if you swing that way) an element and choose “Firefind Element” to send it to the Firefinder panel.

Inspect link integrated with Firebug’s HTML panel

In your result listing in Firefinder, you can now click an element’s Inspect link to immediately be taken to the same element in the HTML tab in Firebug – in case you want to check its CSS code or do some minor editing. Also, remember that you can actually edit the code for an element in the HTML tab, then go back to Firefinder and share its code through the FriendlyFire feature, and the updated code will then be shared!

Better performance

The CSS selector mechanism in Firefinder now exclusively uses the querySelectorAll support in Firefox 3.5. This means that your CSS selectors will get the best performance possible, and there will be no pass-through of any JavaScript library. Possible downside is that Firefinder now requires Firefox 3.5 to use, but my take was that everyone (developer, that is) already has it anyway.

Better integration with Firebug

In general, the showing and hiding of the Firefinder panel works better now, and all buttons and actions are behaving just like in Firebug. Remember that you can show/skip to the Firefinder panel, even if Firebug is hidden, by choosing Tools > Show Firefinder for Firebug or via its keyboard shortcut Command + Shift + V on Mac OS X and Ctrl + Shift + V in Windows and Linux.

Just one button to filter, which automatically detects if it’s a CSS filter or an XPath expression

Previously, there was one button for using CSS selectors and another for XPath. Now Firefinder automatically detects what sort of expression it is, and takes it from there – just press Enter in the field or click the “Filter” button to find elements.

Demo video

Sometimes, it’s difficult to describe everything in words, so I have also put together a demo video of using Firefinder, and with the new FriendlyFire feature:

Contributing

After 4 and a half years of blogging and code sharing, and my partaking of open-source projects, you know my main drive isn’t about getting paid for my code – it’s about sharing code and features with the world and other developers.

With that said, I do want to mention the possibility that if, and I really mean if, you want to contribute or express gratitude, I now accept contributions on the Firefinder add-on page, where the suggested donation is $1.

If you want to contribute, thank you very much – if not, it is naturally completely cool as well.

Download Firefinder

Don’t hesitate now, go download Firefinder right now! I hope it rocks your world as much as it does mine! 🙂