Zach’s ugly mug (his face) Zach Leat­herman

JavaScript Code Coverage Tool for Firebug

13k 018 April 18, 2007

Warning

This article is old and may contain information that is outdated, irrelevant, or—dare I say it—no longer accurate. Read with care!

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

Update: After many requests and much self deliberation, I have decided not to update the plugin to work with newer versions of Firefox. Code Coverage doesn’t belong in the browser, it’s just the wrong place in the tool chain to have something like this. Code Coverage results need to be exportable, and the utility must be executable from the command line to use with unit tests and continuous integration.


Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at Font Awesome and the creator of Build Awesome (née IndieWeb Avatar for https://www.11ty.devEleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 89 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

18 Comments
  1. Avatar for Rafael
    Rafael Disqus
    29 May 2007
    Hi!I'm trying to develop something similar to what you're trying to do with Selenium and Firebug Code Coverage.Do have any reference of how to do this integration? How to instantiate an add-on "A" into an add-on "B"?Tks for the attention.Rafael
  2. Avatar for Zach Leatherman
    Zach Leatherman Disqus
    31 May 2007
    Sure, I have all the stuff I used as a reference (particularly the link about "Extending Firebug") over at delicious under the tag XULhttp://del.icio.us/zachleat...
  3. Avatar for Alex
    Alex Disqus
    12 Jun 2007
    This is an absolutely amazing plugin for Firebug! I was looking all over the net for something like this, and it was a PERFECT fit!Of course, I'd love some more features :) Please please please add: 1) Support for nested function - OO-style. If there's a class MyClass and a function MyFunction, it would be awesome if you displayed it like "MyClass.MyFunction"2) Click to navigate to the definition of the function. Firebug already has a great code browser, it would be amazing to be able to click on a function name in your plugin and go directly to the place in code where it's defined.
  4. Avatar for Aravind
    Aravind Disqus
    14 Jun 2007
    Hi,I have a requirement (may be strange) as follows:- Execute blackbox test cases using GUI- Hopefully, there is a tool that can record all my actions while I execute blackbox test and play back.- The tool should be able to export the recorded instructions as HTTPUNIT tests.- I need in particular HTTPUNIT or any other tests basically to see the code coverage of JSP/JAVA files.Is there anything for this?Please help
  5. Avatar for Elephant
    Elephant Disqus
    06 Aug 2007
    Cool extension. Why don't you publish it in Mozilla Ads-ons page?
  6. Avatar for Zach Leatherman
    Zach Leatherman Disqus
    06 Aug 2007
    It's currently in the sandbox. They won't make it public until it has a certain amount of reviews.
  7. Avatar for David Burns
    David Burns Disqus
    09 Aug 2007
    This is really good tool. I really like it as I am trying to automate any and all items that i can.I do have one question though. I ran a selenium test and one of the items that code coverage picked up showed a function in both Function Called and Function Uncalled.Why is this?Thats my only question but its really good!
  8. Avatar for Zach Leatherman
    Zach Leatherman Disqus
    10 Aug 2007
    Well, it doesn't report on nested functions inside of objects. So, for example, say you have two identical functions located inside two different objects.YAHOO.util.Dom.getStyle()DAVIDBURNS.getStyle()would unfortunately both be reported as getStyle in the current plugin.
  9. Avatar for Mike Cole
    Mike Cole Disqus
    20 Sep 2007
    Top-notch! Thanks!
  10. Avatar for Jokin
    Jokin Disqus
    14 Nov 2007
    do you have a place where request features or submit bugs? it will be good if the columns size would be resizable, i have some calls to long uri scripts (.net weresource.axd with a chunk of encoded data on the parameters) and i'm not capable of view the functions called.
  11. Avatar for Zach Leatherman
    Zach Leatherman Disqus
    15 Nov 2007
    Well, it uses the default table structure given from Firebug. So, if that feature gets added into Firebug, it'll be usable here. I don't think I want to be the one to add resizeable columns though.You could buy a higher resolution monitor? :P
  12. Avatar for Zach Leatherman
    Zach Leatherman Disqus
    30 Mar 2008
    Saw another tool for JavaScript code coverage in a link to my page, and it's got command line, and line reporting!http://siliconforks.com/jsc...Source:http://rplcodeline.blogspot...
  13. Avatar for Daniel Colascione
    Daniel Colascione Disqus
    08 Jan 2009
    Check out the hrtimer Firefox extension, which contains a both a line-by-line code coverage tool for Javascript and a call-graph profiler. The package is still in development, but it's useful now.
  14. Avatar for Zach Leatherman
    Zach Leatherman Disqus
    08 Jan 2009
    Awesome Daniel!Any plans for integration with Firebug?
  15. Avatar for VELO
    VELO Disqus
    08 Jun 2009
    Any hope to update it for firefox 3.0?VELO
  16. Avatar for Aaron T. Grogg
    Aaron T. Grogg Disqus
    22 Jun 2009
    hey, Zach, cool looking add-on, any word on it being compatible with FF 3.0.10 or .11?thanks,Atg
  17. Avatar for well
    well Disqus
    14 Sep 2009
    hey, cool looking add-on, any word on it being compatible with FF 3.3?thanks,
  18. Avatar for Zach Leatherman
    Zach Leatherman Disqus
    31 Dec 2009
    Hey guys, I've updated the article with information about the future of this plugin.
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)