Erik A. Hanson's Weblog

Sometimes I find that I want to debug a JsUnit test because I’m not quite sure what’s going on in the browser.

FireBug has a nice debugger, but I couldn’t get it to work with the JsUnit test runner. I could set breakpoints in JsUnit itself, but any breakpoints in my test would be ignored.

And then it hit me: ditch the test runner. I opened my test page directly in Firefox, opened FireBug, clicked the Debugger tab, and chose my test from the “Scripts” menu. Here’s a simplified version:

function testUpdate() {
  var listPanel = new ListPanel();
  listPanel.update(["one", "two", "three"]);

  var children = $("content").childNodes;
  assertEquals("one", children[0]);
  assertEquals("two", children[1]);
  assertEquals("three", children[2]);
}

I put a breakpoint at the first assertEquals and switched to the Console tab and typed testUpdate(). I saw the ListPanel getting drawn in the browser (something you don’t see in the JsUnit test runner) and in the Debugger tab I could inspect all my variables.

But even better, I could go back to the Console tab and start evaluating Javascript.

>>> children.length
3

Good.

>>> children[0]
div

Bad.

>>> children[0].firstChild
[Text] "one"

Better.

>>> children[0].firstChild.nodeValue
"one"

Perfect.