Joshua
Let me start by admitting to how wrong I was about not being able to introspect on functions in Javascript. Why didn’t anybody tell me? It turns out that using Prototype’s $H function strips out function properties from an object. I suppose that makes sense, so now I get object properties the old-fashioned way with a for/in loop.
Now on to more interesting things. I’d like to introduce to you, Joshua. As you can see, Joshua is an interactive Javascript console not unlike the one I last posted about. Alright, so it’s the same thing. Joshua, however, is a bit more ready for public consumption. It includes full on tab-completion and, as requested, a command history.
It’s also packaged up quite nicely and is very easily deployable. Just include the Prototype and Joshua scripts in your header, make a div for your console window with a unique ID, and add this single line of code:
new Console('my-console-window');
You’ve just deployed Joshua. You can position your container div however you like. You could make it draggable. You could make a link to toggle its display. It’s really up to you.
You can also style the console using the stdout and stdin classes. You could make it look like your favorite console environment. You could make it transparent. Again, totally up to you.
What Joshua provides is a powerful interactive cross-platform console to help you get through your Javascript debugging. Almost every Javascript application I make ends up needing something like this. Every cool language has an interactive interpreter. Javascript is a cool language, but unfortunately one of the most painful. Hopefully Joshua will make it less painful.
Let’s take a quick tour. When you start it up, you should see something like this:
Joshua Javascript Console 0.6.0
Netscape [Mozilla] 5.0 (Macintosh; en-US) on MacPPC
>>
From here you can just start typing any sort of Javascript you’d like.
>> 1 + 1
=> 2
>> foo = ‘jeff’
=> jeff
>> foo.replace(’ff’, ‘ph’)
=> jeph
>>
At any point you can hit tab to try and autocomplete, or hit tab twice to see what’s available at that point.
>> "joshua rawks“.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 stripTags escapeHTML unescapeHTML toQueryParams toArray camelize inspect parseQuery
>> “joshua rawks“.stripTags()
=> joshua rawks
>>
An interesting side-effect of all this taking place in HTML is that any HTML will render. That might not be a good thing in some cases, but for now we can just deal and pretend like it’s neat.
You can even browse and modify the document model and style.
>> document.b
baseURI body bgColor
>> document.body.style.text
textAlign textDecoration textIndent textShadow textTransform
>> document.body.style.textAlign = ‘right’;
=> right
>>
Whoa, that was crazy! (Ahem, if you were following along.)
There’s still a lot more coolness to be added, but this is really all you need. Thanks to Andy and Adam for suggestions, and Rowan for solving my scrolling issue.