Recipe 10.11. Debugging Your JavaScript in Real Time with the JavaScript Shell

Problem

You want to debug the JavaScript of your Rails application interactively. For example, you want to test JavaScript that manipulates the DOM of a page and see the results immediately.

Solution

The JavaScript Shell is a great tool for interacting with your application's JavaScript. It's available from http://www.squarefree.com/shell. To install the bookmarklet, look for the one called "shell" on http://www.squarefree.com/bookmarklets/webdevel.html, and drag it onto your bookmarks toolbar.

To use it, open a web page in Firefox, click on the shell bookmarklet, and the JavaScript Shell window will open in another window. Within this window you can execute JavaScript and manipulate elements of the original web page you were viewing.

For example, let's say you have a web page called demo.html that contains the following HTML:

~/Desktop/demo.html:

<html>   <head>     <title>JavaScript Shell Demo</title>     <script type="text/javascript" src="/books/4/185/1/html/2/prototype.js"></script>     <style>       .red {color: red;}     </style>   </head>   <body>     <h2 >JavaScript Shell Demo</h2>     <div >Demo Text...</div>   </body> </html>

While viewing the page in Firefox, click on the shell bookmarklet and a pop-up window will appear. Within that window you can start typing JavaScript commands interactively. From this window, you can create variables containing element objects and then start playing with the properties of those objects, such as altering style elements or triggering script.aculo.us visual effects.

Figure 10-3 shows what demo.html looks like, along with the JavaScript Shell window you get with the bookmarklet. Because demo.html includes the Prototype JavaScript library, you have the methods of that library available to you in the JavaScript Shell. For example, $('content') is the same as getElementById('content') and is used to return a div element object, which you can manipulate any way you want.

Figure 10-3. The JavaScript Shell, opened with a bookmarklet, interacting with its parent window

Discussion

The JavaScript Shell is an extremely useful tool for inspecting and experimenting with the JavaScript of a page in real time. It's most useful when run as a Firefox bookmarklet.

The JavaScript Shell enables you to inspect the JavaScript environment of your application, much as you examine the methods available to Ruby objects with irb:

irb(main):001:0> Time.instance_methods(false)

To find out about JavaScript objects in JavaScript Shell, use the built-in props function. For example:

                props(document) Methods: onclick Methods of prototype: addBinding, addEventListener, adoptNode,  appendChild, captureEvents, clear, cloneNode, close,  compareDocumentPosition, createAttribute, ...

The props method lists all the properties and methods available to any object you pass to it. The blink(node) function flashes a red rectangle around an element on the page, letting you know its position: this can be useful for locating objects in a complex page. The load(scriptURL) function loads a script into the environment of the shell, making its objects and functions available to you.

Other features of working in the JavaScript shell are command-line completion and the ability to enter multiline blocks of code. To make a multiline block, use Shift+Enter at the end of each line.

Recipe 10.11. Debugging Your JavaScript in Real Time with the JavaScript Shell