Using the Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<img src="images/myPageSimulation.JPG" id="TheImage" />
Once you have a script tag referencing the Jshell.js file, your web page should have a floating div appear, like so:
Let's go over how to use the control next. To move the control, click and hold your mouse over the gray bar and drag it around. Drag it to wherever you like. This allows you to still see vital data while searching the DOM. The ReOpac button toggles the opacity of the control between '.2'/''. This lets you see through the control in case it is blocking something important. The ReSize button toggles the width of the control between 230px/490px. The reason for this is if you have Jshell on a small page, like a pop up.
Let's talk about searching (we will discuss the Back, Forward and Search buttons while talking about searching). Jshell can search in a few ways. You can search via the text box below all the buttons. Simply type in what you want to search for and hit the Search button. Also, you can hit the Enter key on your keyboard while your mouse still has focus on the text box. While searching, you will notice the DOM pieces come back in multiple colors:
- Blue means the value of the DOM is text, and more than likely cannot be parsed any further.
- Orange means the value cannot be parsed any further. If something is orange and it is a list, try adding a
 to the end of your search string; it might get you back on track.
- Red means the given data could not be evaluated, typically coming back as undefined.
- Green indicates that further enumeration is possible. You can click on the green text to search on it.
After searching on some things, you can use the Back and Forward buttons. These buttons let you move through the last 10 searches you have performed. When Jshell first starts up, the Back button already has the following 4 searches at your disposal:
So now that you know the basics, click around and have fun! Try searching through the DOM in multiple browsers and you will see some interesting differences. You can even search on things like
navigator for all your browser info.
Points of Interest
The two things that really grabbed my attention while writing this code were...
- Associate Arrays. CRAZY KOOL! I wish someone would have taught me about them earlier on in my career.
- The whole issue of opacity, talk about a cross browser horror story...
.style.filter = 'alpha(opacity=20)';
.style['-moz-opacity'] = '.20';
.style.opacity = '0.2';
Having to do one thing 3 different ways for X amount of browsers is a big chunk of the cross-browser issue.
Version 1.0.0, when I wrote this article, 1/29/2008.