This site uses cookies to offer you a better browsing experience. Find out more on Privacy Policy.

FireQuery – Firebug extension for jQuery development

January 27, 2010 PGS Team

FireQuery – Firebug extension for jQuery development

The most interesting feature of this add-on, is displaying extra jQuery attributes attached to an HTML element, using the jQuery.data() method. That means NOT standard HTML tag attributes like: CSS Class name, Size, etc.
Due to the JQuery API “the jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks”.
Using this JQuery method is really easy:

<script type="text/javascript">
   //Look into the Firebug HTML Tab
   //and watch the BODY Tag.
   //You should see the [Extradata] in there.
   $('body').data('Extradata', {
       Prop1: "Test1",
       Prop2: "Test2"
   });
</script>
</body>
</html>

Other useful feature of this add-on is, the JQuery methods are on the top of the Firebug DOM window list, or at least in the Top 20 :).

Last but not least you can display FireQuery information about HTML tags in the Firebug console, using the console.log() command:

...
<script type="text/javascript">
   //This command will display in the Firebug console
   //extra jQuery attributes of the BODY tag.
   console.log($('body')); 
</script>
</body>
</html>

Complete FireQuery test source code:
FireQuery test source code

FireQuery additional information in Firebug:
FireQuery results in Firebug

Without any doubts I can say, that this extra information may be sometimes helpful and can improve my work when developing websites using JQuery JavaScript Library, but you need to be careful! The author writes, that this extension may be insecure. Good solution is to have dedicated Firefox profile for development and use it only for safe sites.

This Firefox Add-on can be download from the Binaryage website.
Also a FireQuery demo page was provided for tests.

Last posts