Software Development

Free JQuery and JavaScript debugging resources you can't afford to ignore

Don't let JQuery and JavaScript errors creep into your production environment. You can preempt such issues by using one of these free debugging resources.

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

 

FireQuery_FigA_021014.gif
 

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

 

FireQueryTest_FigB_021014.gif
 

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

 

JQueryDebugger_FigC_021014.gif
 

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

 

Firebug_FigD_021014.gif
 

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

 

FirebugInstall_FigE_021014.gif
 

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. 

 

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks