Firefox Developers

Developer Tools for the Open Web

« PreviousNext »

Introducing Scratchpad

15 August 2011

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.

Rob Campbell's Scratchpad+Canvas Demo

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:

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.

Code in Scratchpad that creates an alert

JavaScript being run in the Scratchpad

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

Posted in announcements | Trackback | del.icio.us | Top Of Page

    38 Responses to “Introducing Scratchpad”

  1. starwed Says:

    It seems to parse relative URLs in an unexpected context. I tried code like
    window.location = “page.php”
    And the location was set to a chrome URL.

    Is this a bug (in 8.0a) or an expected result?

  2. Colin Says:

    Syntax highlighting. You need it.

  3. kdangoor Says:

    That looks like a bug. I’m sure it’s a side effect of the execution context, but it’s still certainly not the behavior that one would expect.

  4. kdangoor Says:

    We just committed a new code editor to the tree. Syntax highlighting (and better editing in general) is coming in Firefox 8 (entering Aurora this week). However, it may be turned off initially while we work out some accessibility and internationalization issues.

    http://antennasoft.net/robcee/2011/08/15/scratchpad-can-haz-orion/

  5. New Tools in Mozilla Firefox Help Developers Drive the Web Forward « Blog id-Mozilla Says:

    [...] help developers build and debug websites directly in the browser. Developers will enjoy the new Scratchpad tool, which makes it simple to quickly enter, execute, test and refine JavaScript snippets in [...]

  6. New Tools in Mozilla Firefox Help Developers Drive the Web Forward | The Mozilla Blog Says:

    [...] help developers build and debug websites directly in the browser. Developers will enjoy the new Scratchpad tool, which makes it simple to quickly enter, execute, test and refine JavaScript snippets in [...]

  7. Mozilla Slovenija Says:

    [...] ki razvijalcu pomagajo pri gradnji in odkrivanju napak. Razvijalci bodo veseli tudi novega orodja Scratchpad s katerim lahko hitro vnesemo, izvršimo, testiramo ali dodelamo JavaScript, ki se nahaja na [...]

  8. Download Mozilla Firefox 6 Official | TechnoBolt Says:

    [...] to get a quick glance at open tabs from an elegant bird’s eye view. Developers will enjoy the new Scratchpad tool, which makes it simple to quickly enter, execute, test and refine JavaScript snippets in [...]

  9. Levan Says:

    Nice tool.
    Yes, syntax highlighting and line numbers would be really cool )

  10. Michael Says:

    Hm… nice, but a way to hook in a text editor of my own choice may suit me better… OR, after syntax highlighting and line numbers… vim keys!

  11. Web design consulting Says:

    hi

    this is a interesting tool for developer. and syntax highlighting and line number is really cool

  12. Oyeme Says:

    Very useful article.
    Thanks for the video.

  13. kdangoor Says:

    I agree that hooking into your own text editor would be great. The challenge there is that Scratchpad has access to your running browser tabs. Extending that access to external applications requires some work for Firefox *and* work for each editor. It’s not insurmountable, though, and it would be very cool.

    In the meantime, we are working on improving the editing experience within Firefox and I think we’ll ultimately be able to provide great usability there.

    vim keybindings would be great.

  14. Serkan Yerşen Says:

    It would be great to have a toolbar button option for scratchpad. Maybe a “developer controls” button for all tools in one place. I would like to access them quickly.

    Thanks for the great addition.

  15. kdangoor Says:

    We have a plan for this (a “Developer Toolbar”) that will offer some nice quick access features for the tools we’re building.

  16. Chris Coleman Says:

    This is great.

    I use jsfiddle.net a ton for various reasons some similar to what I can achieve with ScratchPad.

    One feature that I would love to see added similarly is that I can save my code to an online repository and share it. Integration with jsFiddle or some other repository that I could share the code with others would be awesome.

  17. kdangoor Says:

    Thanks, I’m glad you like it!

    I definitely see integrating Scratchpad with external services like that being a useful feature. I had been thinking of gist myself previously, but jsfiddle is even more natural. Thanks for the suggestion

  18. Mozilla Hacks Weekly, August 18th 2011 ✩ Mozilla Hacks – the Web developer blog Says:

    [...] tool for Web devs, a bit like the Web Console on steroids. Kevin Dangoor has a great post on this: Introducing ScratchPad. Web devs who want to know what is coming in this department with future Firefox versions should [...]

  19. Don Says:

    Awesome work! Thank you.

    Pad window tabable?
    Have the debugger screen split with the code editor window instead of in another window?
    Code completion/intellisense?

    Great work thus far and will definitely use it!

  20. kdangoor Says:

    Yeah, all of that in time!

    Thanks!

  21. Lococast.net Episode 19 – So, we went to PyOhio and all I got was this t-shirt « Lococast.net Says:

    [...] ScratchPad in Firefox 6.0 [...]

  22. Ben Barber Says:

    I’d love a CSS scratchpad also. Something similar to my CSS Terminal bookmarklet, http://barberboy.github.com/css-terminal/

  23. kdangoor Says:

    We’ve got a Style Editor in development now that can very easily be used as a CSS Scratchpad.

  24. Scratchpad – a tool for JS developers in Firefox : Max Ivak Personal Site Says:

    [...] Read more about features of Scratchpad here. [...]

  25. Bob Says:

    super-awesome, thank you for this. my little suggestion (and maybe it exists and I don’t know it) is a keyboard shortcut to toggle focus between the browser window and scratchpad window.

  26. Lance Says:

    This is AWESOME !

    I’ve just returned to Firefox after a few months with Chrome and this kind of thing is why Firefox will likely become the *leading* web development platform – it is already number 1 at w3schools by the way (http://www.w3schools.com/browsers/browsers_stats.asp)

    As for suggestions, I don’t need to make any. This is exactly what I have been looking for the past few months and I know that you are already planning to implement the features we are all looking for – because you are developers yourselves :-)

    Keep the good work !

  27. JavaScript Magazine Blog for JSMag » Blog Archive » News roundup: vintageJS, accounting.js, spin.js Says:

    [...] now has Scratchpad: a place to experiment with JavaScript in the [...]

  28. Rob Crowther Says:

    > If you want to put a variable onto your page, just set it on window.

    Just a note after I spent ten minutes trying to figure it out how to get the scratchpad to write an object in the console:

    window.console.log(x);

    Probably it was just too obvious for anyone else to mention :)

  29. Franklin Davis Says:

    Insanely great tool!* Please post Rob’s demo code from the video. Thanks.

    * In honor of Steve Jobs…

  30. Do you write right-to-left? Help us test the code editor! « devtools Says:

    [...] you haven’t tried Scratchpad before, you might want to check out the Introducing Scratchpad blog post to learn more about the [...]

  31. Firefox 7 available! | Stefano Paganini: mining for web, marketing, technology, fun Says:

    [...] the way, has anyone appreciated the Firefox 6 (yes, still fiddling with that) Scratchpad? The new Scratchpad tool makes it simple to quickly enter, execute, test and refine JavaScript [...]

  32. Jon Says:

    If the web console tells me what line the error is on – I WANT LINE NUMBERS in the editor!

  33. kdangoor Says:

    It’s coming.

  34. gz Says:

    Great, but when i save a file with utf-8 characters in it (greek)
    it comes back with strange characters….
    How can i save a file from scratchpad with utf-8 or other
    encodings ?

    Thanx,

    G.

  35. David Guthrie Says:

    I love this, but would like to see some syntax highlighting, numbered lines, and like gedit and notepad++, some “themes” (like cobalt, my favorite )

  36. kdangoor Says:

    The current Firefox beta, coming out early November, has an about:config preference you can set devtools.editor.component to “orion” that gets you much of this. (Not themes yet). We’re still working on getting that editor whipped into shape to be on by default, likely in February’s release.

  37. kdangoor Says:

    I’m not sure which encoding is used now. I filed a bug, because it does seem like we should at least be using utf-8

    https://bugzilla.mozilla.org/show_bug.cgi?id=694967

  38. Orion Editor Ships in Firefox 8 | Orion News Says:

    [...] on successfully installing part of Orion! Firefox 8 now includes the Orion code editor in its scratchpad feature. The Orion editor is currently disabled by default, but it can be enabled as [...]