jQuery and JavaScript are being added to and used in most web design
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
production.

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

FireQuery

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).

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).

Figure B

 

 

A short screencast of the tool in action demonstrates and highlights using several of FireQuery’s features.

JQuery Debugger

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).

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.

JavaScript debuggers

Firebug

Firebug (Figure D) is a
popular JavaScript debugging and profiling tool that can be added as an extension that integrates into Firefox. The JavaScript Debugger allows you to set a pause of the
code execution on any line of code to see what the variable does at the exact
moment. The JavaScript profiler allows you to measure performance and find
issues resulting from JavaScript errors.  

Figure D

 

 

Requirements: Firefox

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.

Figure E

 

 

Advanced JavaScript Debugging with console.table()

In the tutorial Advanced JavaScript Debugging with console.table(), Marius Schulz
shows a JavaScript debugging feature that is part of the Chrome
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
Object Properties.

Google Developers Debugging JavaScript 

The resource Google Developers Debugging JavaScript section reviews using
the Sources panel within the Inspect Element web developers tools within Chrome for debugging JavaScript. I
like the fact that it’s already built into the Chrome web development tools.

List your favorite debugger

What’s your favorite tool or feature for debugging JavaScript or JQuery? Let us know in the discussion.