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.
Rob Campbell's Scratchpad+Canvas Demo
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:
- Enter some code
- Select a portion of the code
- Choose one of the three commands from the Execute or right-click context menu
The three ways to run code with Scratchpad are:
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
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
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.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
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