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:
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.
