FireQuery
a Firebug extension for jQuery development
Features
FireQuery is a Firefox extension integrated with Firebug
- jQuery 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
- jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)
Compatibility
Both Firefox and Firebug are moving targets. Please make sure you use compatible versions. I’m unable to test all possible combinations.
- v1.3 works with official Firebug 1.3.3, 1.4.5, 1.5.4, 1.6, 1.7, 1.8, 1.9, 1.10.3 (Firefox 3.0 - 18.0)
show compatibility of older versions ↓
- v1.2 works with official Firebug 1.3.3, 1.4.5, 1.5.4, 1.6, 1.7, 1.8, 1.9 (Firefox 3.0 - 13.0)
- v1.1 works with official Firebug 1.3.3, 1.4.5, 1.5.4, 1.6, 1.7, 1.8, 1.9 (Firefox 3.0 - 11.0)
- v1.0 works with official Firebug 1.3.3, 1.4.5, 1.5.4, 1.6, 1.7 also worked for me with a beta of Firebug 1.8 (Firefox 3.0 - 5.0)
- v0.9 works with official Firebug 1.3.3, 1.4.5, 1.5.4 and 1.6, also worked for me with early beta of Firebug 1.7 (Firefox 3.0 - 4.0)
- v0.8 works with official Firebug 1.3.3, 1.4.5, 1.5.4 and 1.6, also worked for me with early beta of Firebug 1.7 (Firefox 3.0 - 3.7)
- v0.7 works with official Firebug 1.3.3, 1.4.5 and 1.5 (Firefox 3.0 - 3.6)
- v0.6 works with official Firebug 1.3.3, 1.4.5 and 1.5 (Firefox 3.0 - 3.6)
- v0.5 works with official Firebug 1.3.3, 1.4.5 and 1.5 (Firefox 3.0 - 3.6)
- v0.4.1 works with official Firebug 1.3.3, 1.4.5 and betas of Firebug 1.5 (Firefox 3.0 - 3.6)
- v0.4 works with beta Firebug 1.5 (Firefox 3.5 - 3.6) - BROKEN with Firebug 1.4!
- v0.3 works with official Firebug 1.3 and official Firebug 1.4 (Firefox 2.0 - 3.5)
- v0.2 works with beta Firebug 1.4 (Firefox 3.0.x or Firefox 3.5)
Screencast
Intro ScreenCast by the Changelog, which brings fresh news about open-source.
Installation
Install the addon from addons.mozilla.org.
After you restart Firefox, you should visit FireQuery Test Page to make sure all is working correctly.
How to build FireQuery from source
If you want to install the addon from the latest source, you need to build it. It should be simple, but make sure you have these tools in your path:
- git
- zip
- ruby and rake
Build steps:
git clone https://github.com/binaryage/firequery.git
cd firequery
rake
After that your XPI should be available in build/firequery-X.Y.xpi
.
You should now be able to install the XPI file in Firefox: File -> Open File
… and browse for firequery-X.Y.xpi
.
Security Note
This extension may be insecure!
So please don’t browse porn sites with this enabled. I still don’t fully understand the Firefox extension security model. The reality is that I interact with naked HTML page from privileged code which may be insecure.
A good solution is to have dedicated Firefox profile for development and use it only for safe sites.
FAQ
How can I specify my own jQuery when pressing jQuerify button?
You can specify your own URL in
about:config
for the keyextensions.firebug.firequery.jQueryURL
.
For example you can use Google’s jQuery urls http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery
How can I show internal jQuery data (e.g. ‘events’)?
Since jQuery 1.7.1 data() function does not return internal jQuery data structures. You may switch FireQuery into original behavior using this option:
How can I use jQuery Lint with FireQuery?
How can I specify my own jQuery Lint version?
You can specify your own URL in
about:config
for the keyextensions.firebug.firequery.jQueryLintURL
.
When I update values via $.data() I don’t see changes in HTML panel. What’s wrong?
You have to enable Console panel for this feature to work