Last week for the first time I did some serious browser JavaScript programming. I put the following tools to good use, but ran against limits with each of them:

  • fvLogger is terrific, but doesn’t include an evaluator. You have to reload your page each time you want to query a new value.

  • Rhino is great for pure logic, but you can’t use it with anything that use a browser API. In fact, you can’t use it with anything that uses anything that uses a browser API. This means, for example, that you can’t use it with a library that uses Prototype, without writing some mock objects first.

  • The JavaScript Shell is pretty amazing, but I wanted something a bit lighter weight (within the same window), and that works in Safari.

What I came up with is inline-console.js. This file adds an output console, and a text field with an “Eval” button, to the bottom of your application. It also defines some logging functions — info, debug, warn, and error — that append text to the console. (If you include fvlogger, it will use it instead.)

The point of this is to be as lightweight as possible. Add script type="text/javascript" src="inline-console.js" (appropriately tagged) to the document head, and the script will take care of adding the UI.

For more fun, include readable.js after inline-console.js. Then {a: 1} will print as {a: 1} instead of [object Object].

Here’s an example. Try entering some JavaScript expressions, such as 2*3, Math.sqrt(2), or document.body, and then pressing “Eval”. (Click here to open the example in a separate window, where you can view source.)

Files:

  • inline-console.js — adds the inline console

  • readable.js — adds readable representations for JavaScript objects (optional)

  • fvlogger — a nicer console UI with more control over which log levels are displayed (optional)

My other JavaScript libraries are here.