HighLight For JavaScript Shell

At GIDS WWW, I was fortunate to attend “A Two-Pronged Approach to Debugging AJAX”, by Venkat_S. As I made a point in my GIDS WWW blog, I got to know about certain new tools that I haven’t used as a JavaScript developer. One such tool is JavaScript Shell.Though firebug console does almost the same I am interested with this tool right from the start. After my return from the conference, I started to play with this shell. Soon I was taken away by its capability to show history commands, though not across invocation as other linux shell does :).  Certain advantages that I see in comparison to firebug console,

  1. History Capability
  2. Easy way to execute a piece of code. In case of firebug console I have to shift my hand (at least fingers) from keyboard to mouse to run a piece of code, this shift is an annoying one for me. JavaScript Shell smartly handles multiple inputs too using shift + Enter, no “shift”.
  3. When I write some selectors in JQuery, I will be comfortable if I have the DOM tree on my side. This is not possible when I use Firebug console as the tool, since I could see only one tab at a time. JavaScript shell comes as a rescue here. I will have the DOM element in firebug and try out my selector in JavaScript shell. Cool, I agree that any other DOM viewer too will work out.

But one thing that I see lacking or could say, not directly available is a provision to highlight the elements that are selected using certain selector. There is a blink(node) function inherent in JavaScript shell. But to this method we can’t pass an array of JavaScript objects, which is the return value for any JQuery selector. I usually workaround this using a small function


                                blink($(this)[0]); // blink is the inbuilt function in JavaScript shell


But after repeating of the above code for 10-15 times with different selectors, the DRY principle and JQuery plug-in framework sparkled in my mind. Without further hesitation I started to write one that could highlight the elements selected by certain selectors. Boo !! It’s all done, I just loaded the js file using load, another function in-built in JavaScript Shell. Now I can use the following syntax to highlight the element in the main page, $(‘:button’).highlight(). I believe that this functionality will add value to JavaScript shell and its users. I have uploaded the plugin as document @ https://veechand.files.wordpress.com/2009/05/jqueryhighlightjs.doc. Three steps, to get this functionality at your door step,

  1. Download the document from the above location
  2. Change the file name to jquery.highlight.js
  3. Open JavaScript shell and run load(“jquery.highlight.js”). Note: You need to have JQuery loaded in the page. If not, you can load the same from http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

Have a nice time with JQuery and JavaScript Shell. Meet you soon !!

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Furl


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: