httpd-docs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Apache Wiki <>
Subject [Httpd Wiki] Update of "ScratchPad" by thumbs
Date Fri, 06 Apr 2012 14:11:35 GMT
Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Httpd Wiki" for change notification.

The "ScratchPad" page has been changed by thumbs:

-- Revert from spam

+ = Writing space for new content =
- = ScratchPad =
- 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
- == 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
- The basic flow with Scratchpad could hardly be simpler:
-  1. Enter some code
-  1. Select a portion of the code
-  1. 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.
- [[|{{|Code
in Scratchpad that creates an alert|height="282",width="600",class="size-full wp-image-129"}}]]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
- Interesting historical aside: Scratchpad was heavily inspired by the  Workspaces feature
of Smalltalk environments. Thirty years in, we’re  still reinventing Smalltalk {{|;)|class="wp-smiley"}}
- 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. 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  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.
- – ''Mevin Sangoor, Developer [[|]]''

To unsubscribe, e-mail:
For additional commands, e-mail:

View raw message