Inline JavaScript Console
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.
When using Firefox, you can get much of the above (and more) for free using the FireBug extension. Very nice tools above, though!
[...] Oliver Steele » Blog Archive » Inline JavaScript Console Debugging tool for JavaScript (tags: javascript debug) [...]
A bookmarklet out of this would be even handier. Add new SCRIPT elements to the HEAD to include this (and readable.js), then call InlineConsole.addConsole (since window.onload will have already fired). and poof..instant JS console on /any/ page.
btw netWindows java widget and ajax toolkit has had this kind of console plus async data loading for years. Alex Russell was the main force behind it, and now he’s at dojo.
Johan: Yes, Firebug is much better, when you’re using FireFox. (Except that I like my HTML element printing better 
. As of the latest Firebug, I just use this for Safari and IE.
Bernard: Do you have a pointer to either of these? I spent some time with Google but I didn’t see anything I could stick in a web page.
Stephen: That’s a great idea! (It turned out to be a little more complicated, because Firefox evaluates the SCRIPT targets asynchronously.) Try the following bookmarklet: (…I can’t get the bookmarklet to show up in a WordPress comment, but you can view it in the header of http://osteele.com/sources/javascript/insert-console.js. I’ll add it to an HTML page later.)
There are already some great tools for this in Firefox, but I found this pretty helpful when trying to debug my application in IE.
Most useful indeed and thanks for the FF extension too. Wish IE wasmore organised with these things.
Tim: you’re very welcome for the script, but I can’t take any credit for the FF extension. It’s by Joe Hewitt, and isn’t related to this code.
I used your inline-console. Great work! Easy to use, and no unneeded fancy stuff.
[...] Inline Javascript Console by Oliver Steele is a lightweight Javascript debugging tool with a clean and simple UI. (Oliver’s page has an example that you can play with.) I wouldn’t suggest it for debugging extremely complex Javascript, but if you just need to pop in an expression here and there before adding it to your project du jour, it’s a nice little tool to have around. It’s like fvlogger, but with an evaluator added. Explore posts in the same categories: Javascript [...]