Installation

FireQuery is an extension of Firebug created by BinaryAge to help developers to keep track with jQuery expressions, data and collections as expressed on tool website:

• Query expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page

You can install the tool from official Mozilla add-on page (it requires Firebug 1.3+ already existed.) One note: You may have to find an older version (v0.3) to make it work with current official Firebug release (v1.4) as my experience on Windows.

In Action

After installing the add-on and restarting Firefox, just go to the test page to see how FireQuery tracks embedded jQuery data on FireBug’s “HTML” tab. The image below illustrates the data embedded in accordance with the jQuery codes to inject them to the page.

FireQuery shows embedded data by jQuery

Now, we’ll dig into cooler features. One of them is the ability to “jQuerify” any web page without jQuery support like Google.com for example. This can be done simply by clicking “jQuerify” button on FireBug’s “Console” tab.

jQuerify Google.com with FireQuery

Wow, now you can execute any jQuery codes in the Google home page. Normally, there is nothing happen when you click on Google logo but you just want it to say hello instead. Paste the following code snippet to Firebug command window and run it.

$('#logo').bind('click', function(){
    alert("Hello, I'm Google!");
    return false;
});

Running jQuery snippet on Google.com

Now, click on Google’s logo and you’ll see the alert dialog appears to say hello to you (no surprise) and the FireBug’s console also shows the jQuery command executed.

Google.com to say hello

Conclusion

FireQuery is a great tool for those who commit to jQuery as main JavaScript library or is going to write a jQuery plug-in. Also, It’s especially useful for developers, theme designers to see the jQuery’s data and effects in action without loading the library and writing codes in the templates.

Recommended Reading

JavaScript & jQuery: The Missing Manual

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to lear... Read More >

CSS: The Missing Manual

Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as ... Read More >

The Foxfire Book: Hog Dressing, Log Cabin Building, Mountain Crafts and Foods, Planting by the Signs, Snake Lore, Hunting Tales, Faith Healing, Moonshining, and Other Affairs of Plain LivingIn the late 1960s, Eliot Wigginton and his students created the magazine Foxfire in an effort to record and preserve the traditional folk culture of t... Read More >