Scratchpad

The Scratchpad tool, built into Firefox 6 and later, provides a handy environment for experimenting with JavaScript code. You can write and test code ideas that interact with the contents of the web page, before switching to your usual development tools to finalize and clean up the end result.

Unlike the Web Console, which is designed for interpreting a single line of code at a time, Scratchpad lets you edit larger chunks of JavaScript code, then execute it in various ways depending on how you want to use the output.

Using Scratchpad

To open the Scratchpad window, go to the Web Developer menu (which is a submenu in the Tools menu on Mac OSX and Linux), then select Scratchpad. This will open up a Scratchpad editor window, which includes a comment that provides some brief information about how to use Scratchpad. From there, you can immediately start writing some JavaScript code to try.

The Scratchpad window looks something like this (on Windows and Linux, you'll also have your menu bar there, while on the Mac, the menu bar is at the top of the screen as usual):

See Using the Source Editor for documentation about the editor itself, including useful keyboard shortcuts.

At the bottom of the window, you see the current execution scope for your code; in this case, it's "Content," or the content of the current page. See Scratchpad scope for details.

The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.

Executing your code

Once you've written your code, select the code you want to run, then right-click (or go to the Execute menu in the menu bar) and choose the way you want to run your code. There are three execution options available.

Run

When you choose the Run option, the selected code executed. This is what you'd use to execute a function or other code that manipulates the content of your page.

Inspect

The Inspect option executes the code just like the Run option; however, after the code returns, an object inspector is opened to let you examine the returned value.

For example, if you enter the code:

window

Then choose Inspect, you get an inspector window that may look something like this:

Display

The Display option executes the selected code, then inserts the result directly into your Scratchpad editor window as a comment. This is a convenient way to keep a running log of the results of your tests while you work. You can also use it as a calculator, in a pinch, although if you don't already have a better calculator program, you may have bigger problems.

Cleaning up

You can reset all variables by choosing the "Reset Variables" option in the Execute menu or in the context menu that appears when you right-click in the Scratchpad window.

Scratchpad usage scenarios

There are lots of ways Scratchpad can be useful. This section covers a few of them.

Testing new code

Scratchpad is particularly useful for testing new code in a live browser environment; you can copy the code you're debugging into Scratchpad and run it, then tweak it until it works. Once it's working, copy it back into your main code file and you're done. In many cases, you can write, debug, and test your code without ever having to reload the page.

Reusable code snippets

The menu bar in Scratchpad offers commands for saving and loading JavaScript code. This facility can be used to keep around bits of JavaScript code you often use. For example, if you're working on a site that uses AJAX requests to load data, you can keep snippets around that perform those load operations for testing or verification of data. Similarly, you can keep around helpful general-purpose debugging functions, such as functions that dump out particular types of information about the DOM.

Scratchpad scope

Code you run in Scratchpad is executed in a sandbox that has access to everything on your page, but won't leak new variables onto the page. If you expressly want to put variables on your page, you can do so by putting them in the window object:

window.myVariable = value;

The new window.myVariable value, in this case, is accessible to scripts running on the page.

Using Scratchpad to access Firefox internals

If you're working on Firefox itself, or developing add-ons, you may find it useful to be able to access all of the browser's internals using Scratchpad. To do this, you need to set the devtools.chrome.enabled preference to true using about:config. Once you've done this, the Environment menu has a Browser option; once that's selected, your scope is the entire browser rather than just the page content.