Defect Detection (and Prevention) in JavaScript and HTML Browser Applications

Background

Thanks to the connection from my coworker Zack Gao at CDC I've been introduced to Andy Dean and his OpenEpi.com open source project. I reached out to Andy and his collaborators offering my assistance and they were happy to accept the help.

Originally funded by a grant from the Bill and Melinda Gates Foundation to Emory University's Rollins School of Public Health, the project's goals are to offer free tools for health professionals everywhere:

OpenEpi provides statistics for counts and measurements in descriptive and analytic studies, stratified analysis with exact confidence limits, matched pair and person-time analysis, sample size and power calculations, random numbers, sensitivity, specificity and other evaluation statistics, R x C tables, chi-square for dose-response, and links to other useful sites.

OpenEpi is free and open source software for epidemiologic statistics. It can be run from a web server or downloaded and run without a web connection. A server is not required. The programs are written in JavaScript and HTML, and should be compatible with recent Linux, Mac, and PC browsers, regardless of operating system. (If you are seeing this, your browser settings are allowing JavaScript.) A new tabbed interface avoids popup windows except for help files.

Needless to say, this is a great project that benefits the epidemiology and medical community around the world. I am happy to get to contribute to it.

As mentioned above, the software is implemented in JavaScript and HTML and is thus extremely cross-platform. Sometimes it is hard to debug these kinds of applications, however. Since offering to help Andy and his team, I've tracked down and eliminated two defects related to dynamic content generation. It took me under and hour combined to remove those defects and relay the solution back to Andy. There are a number of tips and tricks for becoming proficient in JavaScript debugging I'll now share.

Tips for Tracking Down Defects in JavaScript & Browser Based Applications

When it comes to investigating a defect inside of a JavaScript program, there are some advanced tools available inside of most modern web browsers to help with this process. You should get intimately familiar with a few of the standard tool-belt items for the major browsers.

Internet Explorer: FireBug Lite and IE Developer Tools

I will cover FireBug in just a moment for Firefox, but be aware there is a "Firebug Lite" available for IE too. Find out about it here: https://getfirebug.com/firebuglite

Since the IE Developer Tools are built in, let's cover those here.

How to Find

Hit F12 or go to Tools menu > Developer Tools.

What You Get

This gives you a number of powerful features, like:

• HTML Element DOM Inspection
• CSS in-line editing
• Console window (Like an immediate window in an IDE)
• JavaScript debugger with interactive breakpoints, and
• Watch
• Locals
• Callstack
• Profiler
• Network Request capture and playback

Screen Shot

Here's a screen capture of me debugging the CalcStats method on OpenEpi.com's Std.Mort.Ratio module:

Internet Explorer Developer Tools debugging OpenEpi.com Std.Mort.Ratio module

FireFox: FireBug and the Web Developer Toolbar

FireFox is probably still my favorite browser, but Chrome is getting closer every day. The godfather of powerful browser tools has to be The Web Developer Toolbar, but it's almost certainly been overthrown by FireBug.

How to Install

Visit http://getfirebug.com and install it, now. Right away. Do not delay.

You should watch a "pyroentomologist" give this introduction too:

Screen Shot

Here's me inspecting the HTML and CSS of an item in OpenEpi. Notice the CSS tab shows the explicit styles and the computed styles. This is extremely helpful information.

Using FireBug to inspect the table cell properties of an EStratum table in OpenEpi.com

You should also install and become familiar with the Web Developer Toolbar: https://addons.mozilla.org/en-US/firefox/addon/web-developer/


This allows you to do things like show ALL of the CSS or ALL of the JavaScript aggregated into a single output page. It can highlight box models or tables, block-level elements, etc. Many of these features exist in Firebug now, but the Web Developer Toolbar is still very helpful. See http://chrispederick.com/work/web-developer/features/ for more info too.

Google Chrome: Developer Tools or Firebug Lite

You can also run Firebug Lite in Chrome, but Chrome has its own built in tools as well. So let's just highlight that.

How to Find

Hit F12 or find it under the menu.

What you Get

You'll get all the same things we've discussed, but some of them more impressive or more fully featured. See the screen shot for an example of the box model metrics for the same element inspected above in Firebug.

Screen Shot

Chrome's developer tools with box model metrics

More Information

This covered the basic tools, but there is some more information here: http://javascript.open-libraries.com/development/debugging/9-great-javascript-debugging-tools