The latest Firefox release includes a new tool for web developers: Scratchpad. The idea behind Scratchpad is simple: the browser is a fantastic place to experiment with JavaScript. Most JavaScript developers already know this and they use tools like the Web Console or Firebug’s command line to take advantage of the one environment that knows everything about their web page.

Tools like the Web Console are optimized for entering a single line of code. (ProTip: you can use shift-enter to put multiple lines of code into the Web Console.) Firebug has a button you can click to get into a multi-line input mode. Even with that multi-line input, the workflow is still centered around performing operations step-by-step and linearly.

Interaction with Scratchpad is quite different. It throws away the “one line of input gives you a line of output” interaction in favor of a text editor that knows how to run JavaScript.

Using Scratchpad

To use Scratchpad, go to the “Web Developer” menu (hint for Mac users: look for the “Web Developer” menu under “Tools”). Select “Scratchpad” from that menu, and you’ll get a text editor window. The window starts out with a helpful hint about using Scratchpad.

The basic flow with Scratchpad could hardly be simpler:

1. Enter some code
2. Select a portion of the code
3. Choose one of the three commands from the Execute or right-click context menu

The three ways to run code with Scratchpad are:

• Run
• Inspect
• Display

They all have keyboard shortcuts, because you don’t want to have to reach for your mouse when you’re writing code.

Run just executes the selected code. This is what you’d use if you’re defining a function or running some code that manipulates your page.

Inspect executes the code as Run does, but it also opens up an object inspector on the value returned. For example, if you select window and choose Inspect, you will have an object inspector that lets you drill into the window object.

Finally, Display executes the selected code and puts the result right into your editor. This could be handy for using Scratchpad as a calculator. Or, more likely, it’s handy for keeping track of results while you’re testing something your page is supposed to do for you.

Interesting historical aside: Scratchpad was heavily inspired by the Workspaces feature of Smalltalk environments. Thirty years in, we’re still reinventing Smalltalk

To really get a feel for Scratchpad, you need to see it in action. Fire it up yourself, or watch Rob Campbell’s video which steps through experimentation with Scratchpad.

Trying New Code with Scratchpad

Scratchpad is a great way to try out code in a live browser environment. For example, imagine you have a function called calculatePosition, and it’s just not working quite right. Load up your page, copy the function into Scratchpad and type out a couple lines of code that make use of calculatePosition. You very quickly get into a flow of tweaking the function and re-running the code.

Once you have the result you want, just copy the code back into your main file. This whole time, you didn’t have to reload the page even once.

Using Common Snippets

Scratchpad also has a way to save its contents or load a JavaScript file. Using this feature, you could save Scratchpads with collections of commonly used functions. For example, maybe you have a site that you work on that has various bits of data that get loaded via Ajax requests. Save a file with a handful of those calls and you can always get the data you want when you’re working on that app.

A Word about Scopes

When you run code in Scratchpad, it runs in a sandbox that has access to everything on your page, but keeps you from accidentally leaking variables onto your page. This is very similar to how the Web Console works. If you want to put a variable onto your page, just set it on window. window.foo=1 will give your page a variable foo that is accessible to scripts on the page.

Scratchpad, unlike Web Console, follows you around as you switch tabs. When you execute code, it runs against the current tab in your browser. This makes it easy to try the same code against your development and staging servers, for example.

Finally, if you’re doing development work on Firefox itself or on Firefox add-ons, you can set Scratchpad up so that it has access to all of the browser’s internals. Go to about:config and set the preference devtools.chrome.enabled to true. This will allow you to change the “Environment” from “Content” to “Browser”. Just don’t blame me if you enter some code that forces your browser to send cat pictures to Google+.

More to Come

Scratchpad is a simple tool, and we want it to stay that way. We’re planning a handful of improvements to Scratchpad that will show up in Firefox over the coming months, but the simple “text editor that runs JavaScript” core will remain.

We’d love your feedback on Scratchpad! Tell us on the dev-apps-firefox mailing list what you think. You can also get involved and make Scratchpad and other developer tools even better.

– Kevin Dangoor, Developer Tools Product Manager