Nerdworks logo "The nerd shall inherit the earth."

Nerdworks Blogorama

Nerdspeak

JavaScript eval console
Technobabble
3/31/2011 8:22:31 AM

One of the things I frequently find myself needing to do as I explore the JavaScript language is to quickly code up little snippets of JavaScript code and run them. Once I'd tired myself of spinning up little HTML files scattered all over the place, I figured I'd write an interactive console of sorts where I can quickly experiment with JS code. Starting with a simple textarea embedded in an HTML page I eventually ended up with the page in its current incarnation. Here's a screen shot of the console in action:

The console uses Ajax.org and Mozilla's Ace web editor to get support for things like auto-indent and syntax highlighting. You can hit the keyboard combination Ctrl+Enter to make the console run the code that is currently in the console. The page automatically loads the latest version of jQuery for you so you have all the $ goodness available to you. There are also a bunch of built-in utility functions available that you can call. Here's a list:

Function What it does Example
print(msg) Prints the string passed to it to the output console. print("Hello.");
pprint(msg) Prints the string passed to it to the output console using <pre> tag. pprint("Pre-formatted hello.");
sprintf(fmt, ...) Similar to the 'C' sprintf function. Returns formatted string. Credit for function goes to http://www.webtoolkit.info/javascript-sprintf.html print(sprintf("ms since 1/1/1970: %d",
   Date.now()));
escapeHTML Use this function if you're trying to print a bit of HTML snippet to the console. If you directly print HTML then the console will simply render it! print(escapeHTML("<div>markup</div>"));
clear Clears the message log pane. clear();

If you'd like to access an online version of the console that you can run right away, then use this:

Run JavaScript Eval

If you'd prefer to use an offline version instead then download it here (note that Google Chrome seems to have problems running this page if served from the disk - so if you're running offline then please stick to IE9, FF or Safari):

Download JavaScript Eval
 
Ganeshji Marwaha 4/18/2011 2:38:44 AM
Ever since I attended your javascript session i have been using this console myself and I can guarantee that my desktop has far fewer testxxx.html files... Thanks a ton...
 
Ranju V 4/18/2011 2:43:19 AM
Glad you find it useful! I am working on a small enhancement to this console that'll let you save the snippets you write to local storage (using HTML5 DOM Storage API). Should get done in a few days. Will put up the update here.
 
Shankar 5/8/2011 11:55:32 PM
Thanks a lot for sharing these tools,
Very usefull ,


 
Ranju V 5/8/2011 11:58:35 PM
Thanks Shankar. Glad you found it useful.
 
Pratap Madgulkar 5/9/2011 12:31:22 AM
This one is too good and simple ..

No need to make temp.html file on desktop .
 
Ranju V 5/9/2011 12:33:42 AM
Yep! Glad you liked it Pratap. Thanks for your comment.
 
Sarfraz Ahmed 2/17/2012 2:31:46 AM
Great tool, I was also looking for one. Thanks for sharing.

BTW, one can still run it Chrome on WAMP or other server setup locally. Syntax highlighting, on-fly error checking etc all work fine that way.

I have started using this tool, modified layout a bit, added other utility functions such as assert, perf :)
 
Ranju V 2/17/2012 2:38:24 AM
Thanks Sarfraz. Yes, it should work on a WAMP or LAMP or any other setup. In fact you don't even need a server, you can just run off the file system. Care to share your utility functions? I can integrate and put it up here. Thanks!
 
Sarfraz Ahmed 2/17/2012 4:05:18 AM
My Pleasure. Basically simple ones but nice to have around for testing:


function perf(times, fn) {

times = times || 10;

var start = (new Date).getTime();

while (times--) fn();

show ('Time: ' + ((new Date).getTime() - start));

}



/*

perf(50, function(){

for(var i=0; i< 20; i++){

}

});

*/



function assert(expression, msg){

Loggers.message.log(expression ? 'TRUE: ' + msg : 'FALSE: ' + msg);

}
 
Ranju V 2/17/2012 4:08:51 AM
Thanks Sarfraz! Will integrate these. Quite useful.
 

Please fill this form and click on the "Submit" button to post a comment. All fields except the comment box are optional. You don't have to give me your name and email, but if you do then that might allow me to follow up with you on your comment. Also, I won't publish your email address here or anywhere else.

 
Your Name :
Your Email :
Your Comment :
   

What in your opinion do you get when you multiply the number 5 by the number 2?

Your answer will help me figure out whether you are human or a spam bot. If you're a spam bot I hope your kernel core dumps and your CPU bursts into flames.

   

Please click here to go back to the blog.

blogorama home
about this blog
email the author
where on earth am i?
subscribe to mailing list
feeds Use these links for feed syndication
rss  |  atom
by category
technobabble (64)
philosophical crud (3)
irrelevant stuff (7)
archive
june, 2012 (1)
november, 2011 (2)
october, 2011 (1)
september, 2011 (7)
july, 2011 (3)
june, 2011 (2)
may, 2011 (3)
april, 2011 (1)
march, 2011 (1)
february, 2011 (1)
february, 2010 (1)
october, 2009 (1)
september, 2009 (1)
july, 2009 (5)
march, 2009 (2)
august, 2008 (2)
march, 2008 (1)
january, 2008 (1)
september, 2007 (2)
april, 2007 (1)
february, 2007 (2)
december, 2006 (1)
october, 2006 (1)
september, 2006 (4)
august, 2006 (3)
july, 2006 (4)
june, 2006 (3)
may, 2006 (6)
april, 2006 (2)
recent entries
Iterating over a st...
Playing in-memory a...
Add a "Web Server H...
Some notes on C++11...
Implementing variab...
Debugging existing...
Screen scraping wit...
Building an Instagr...
Building an Instagr...
640718 hits