implementations today, so it makes sense to incorporate a debugging and
troubleshooting strategy for both in your web development environment. Debugging tools and resources are a good way to prevent errors from occurring once your edits are made live in
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.
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.
Firebug (Figure D) is a
code execution on any line of code to see what the variable does at the exact
Compatibility: It depends on the version
of Firefox installed (see Download Firebug for Firefox for 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.
Developer tools. He demonstrates how to use the console.table() function and shows how to use the Logging Array Data
with console.log() and console.table(), in
addition to log object data, and a section on Filtering the Displayed
like the fact that it’s already built into the Chrome web development tools.
List your favorite debugger