I highlight five debugging options that I think are worth your time. (Notes: These tools were available and working at the time of this writing. All images are screen captures from my desktop monitor.)
JQuery debugging tools
BinaryAge’s FireQuery is a free Firebug extension and integration tool for Firefox. It features the ability to present jQuery expressions in the Firebug Console and DOM inspector; it provides highlight on hover for elements in jQuery collections; and it enables you to inject jQuery into any web page in the browser.
Requirements: Firebug and a recently updated version of Firefox.
Compatibility: FireQuery v1.4.1 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 – 26.0), in addition to older versions as listed in the Features section.
Installation: You can install FireQuery from addons.mozilla.org from Firefox by clicking the green + Add To Firefox button (Figure A).
Once the plugin is installed, you’ll need to restart Firefox. After the installation, you can test and confirm that FireQuery is working by browsing to its test page (Figure B).
A short screencast of the tool in action demonstrates and highlights using several of FireQuery’s features.
JQuery Debugger is a free Chrome extension from Chrome Developer Tools. It features a new Selector Inspector panel. It also includes the jQuery Data and Events sidebars for showing jQuery and HTML5 data of the selected element, in addition to showing event handlers of the selected element including live and/or delegated events that have a similar effect on selected elements.
Requirements: Chrome browser and a Google account
Compatibility: The latest version of Chrome
Installation: Browse to the extension and click the blue + Free button (Figure C).
Click the Add button on the confirmation dialog pop-up. Once it’s installed, you’ll see the green Added To Chrome button in the same location.
Compatibility: It depends on the version of Firefox installed (see Download Firebug for Firefoxfor compatible versions).
Installation: Click the red Install Firebug button (Figure E). Then, find the version that matches with your current version of Firefox, click the Download link, and follow the default instructions. You may have to restart Firefox for Firebug to complete the install and be ready to use.
List your favorite debugger