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 >

Evernote For DummiesThe fun and easy guide to using Evernote for everything that's noteworthy

Voicemail, email, things to do, things to get, people you know, places you... Read More >