Poor Man's JavaScript Tester

February 17, 2011

Alternative title: “Seasoned programmer discovers JavaScript Function class, slaps own forehead”

Anybody who knows me knows that I’m not a big fan of JavaScript. It is a misleadingly named language that has beginnings rooted in proprietary in-fighting and the end result, IMO, is an inelegant pile of crap. All I can say is thank God for jQuery!

Anyway, whilst wrestling with a really stupid little JavaScript problem the other day I found myself caught in a very inefficient loop of adding alert() statements to a section of code, swtching from editor to terminal window in order to rerun my minification script (which also puts the minified code into the right place for downloading), then switching from terminal window to Firefox, hitting refresh to update the cached copy of the code, then typing some stuff into a form and submitting it, all so that I could observe the result of some check or another in the resulting dialogue box.

After about 10 minutes of this madness I decided there had to be an easier way. I vaguely recall discovering a web site some time ago that had a really cool browser-based JavaScript workbench, but I couldn’t find it again. What I did discover in my travels was the JavaScript Function class, which allows dynamic creation of a JavaScript function on-the-fly, in-browser. Sweet. So I whipped up the following script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Javascript Tester</title></head>
<body onLoad="document.getElementById('output').value = ''" style="margin-left:auto;margin-right:auto;width:800px">
<textarea id="code" rows=20 cols=80>output('This is a test');</textarea><br />
<input type="submit" value="RUN" onclick="run()" style="width:10em" />
<p>Status: <span id="status">Ready...</span></p>
<textarea id="output" rows=10 cols=80></textarea>
<script type="text/javascript">
function output(text)
{
    document.getElementById('output').value += text + '\n';
}

function run()
{
    document.getElementById('output').value = '';
    document.getElementById('status').innerHTML = 'Running...';
    var newFunc = new Function(document.getElementById('code').value);
    newFunc();
    document.getElementById('status').innerHTML = 'Done.';
}
</script></body></html>

Click here to try it out

So now I just hit that page, pop in my test code (calling the output() function to send results to the output area) and click "Run". I tested it in Firefox, Safari and Chrome and it worked fine. Should work fine on the other browsers as well.

I’m sure there are 10 million other ways to debug JavaScript, but many of them probably require a certain amount of client-side configuration. If you want to quickly test the behaviour of a certain piece of JavaScript across multiple browsers then this script may be just the shot. It also has the advantage that you know what is running in between the browser and your code (answer: not a lot!). So you know your tests aren’t being adversely affected by any modifications to the browser’s state, which is something that might occur if you were using a more elaborate approach.

So do I like JavaScript any more now? A little. ;-)

Poor Man's JavaScript Tester

Yet Another Programming Blog