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.
Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) replaced the editor in the Scratchpad with Orion, which provides syntax highlighting, improved indentation, and other features. In addition, the content of the Scratchpad window is now saved using the Firefox session restore feature, so it's now persistent across restarts of Firefox.
Starting in Firefox 13, you'll find an option that takes you to this page in the Help menu. How helpful!
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.
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.
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:
Then choose Inspect, you get an inspector window that may look something like this:
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.
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
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.myVariable = value;
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
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.