About this entry

You’re currently reading “JavaScript Code Coverage Tool for Firebug,” an entry on Web 3.0, 6 Bladed Razors, 7 Minute Abs

Published:
04.18.07 / 2pm
Category:
JavaScript, Projects, Web Browsers
Bookmark with delicious Bookmark with
del.icio.us
Add to Digg Add to
Digg
Post on reddit Post on
reddit
Favorite at Technorati Search on
Technorati

JavaScript Code Coverage Tool for Firebug

Download FirebugCodeCoverage-0.1.xpi

Recently, I've become interested in client side automated testing tools. When I found the Selenium plug-in for Firefox, I was blown away. I can record actions in my browser and play them back! No more manual testing of JavaScript code!

Researching a little bit more about automated testing tools led to the discovery of a metric called 'Code Coverage', a statistic that gives you a percentage of how much of your code executed during a certain period of time (usually while your automated test was executing).

Of course, I immediately thought of Joe Hewitt's Firebug extension for Firefox, which includes a feature for JavaScript Profiling. The Profile feature of Firebug was similar to a Function Entry Code Coverage report, so I decided to modify the feature and release an add-on for Firefox that showed (at a file level) a list of which functions executed and which functions did not.

coverage.gif

So, now, to test my JavaScript code coverage, I will write automated tests using the Selenium IDE plug-in for Firefox, hit the Code Coverage button in Firebug, and try to get my Code Coverage statistics in the upper 90%'s.

Screenshot Example of running the tool at yahoo.com
Code Coverage

Download FirebugCodeCoverage-0.1.xpi.

Requirements (obviously)

  • Mozilla Firefox
  • Firebug Extension for Mozilla Firefox

Limitations:

  • Does not include statistics on anonymous functions.
  • Is limited to function (entry) code coverage, does not include other forms such as exit, statement, condition, or path code coverage. (Description: Wikipedia)
  • Is my first Firefox add-on, so there was a learning curve involved.

Future Improvements:

  • Automated integration with Selenium IDE (one button to run tests and do code coverage)
  • Better display of results, instead of a big kludge of function names
  • Additional types of coverage, depending on what options are available from jsdIDebuggerService

Technorati Tags: , ,

Thanks for reading. If you found this article useful, and you've read through some of my previous articles, you might as well Subscribe to my content subscribe to my blog. You'll save me some bandwidth that way.