Inline JavaScript Console

March 3, 2006 in JavaScript, Libraries, Projects | Comments

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.

Viewing 10 Comments

 

Trackbacks

(Trackback URL)

close Reblog this comment
Powered by Disqus · Learn more
blog comments powered by Disqus