Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Technologies
Feedback
Sign in
Search
Unlike the Web Console, which is designed for interpreting a single line of code at a time,
Scratchpad lets you edit larger chunks of JavaScript code, then execute it in various ways
depending on how you want to use the output.
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad 1/9
5/3/2018 Scratchpad - Firefox Developer Tools | MDN
Usage
Opening Scratchpad in its own window
There are several different ways to open Scratchpad in its own window:
click the wrench icon ( ), which is in the main toolbar or under the Hamburger
menu ( ), then select "Scratchpad".
From Firefox 47, you can open Scratchpad inside the Toolbox. First you need to check
"Scratchpad" in the "Default Firefox Developer Tools" section of the Settings page.
Now Scratchpad will be available in the Toolbox, alongside other tools like the Page
Inspector and the Web Console. This is especially useful in split Console mode: you can
use Scratchpad for a persistent, multiline editor, and the Console to interact with the
page.
Editing
The Scratchpad window looks something like this (on macOS the menu bar is at the top of
the screen):
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad 2/9
5/3/2018 Scratchpad - Firefox Developer Tools | MDN
The File menu offers options to save and load JavaScript code snippets, so you can reuse
code later if you like.
Code completion
Scratchpad integrates the tern code analysis engine, and uses that to provide
autocomplete suggestions and popups containing information on the current symbol. To
list autocomplete suggestions, press Ctrl + Space .
For example, try typing d , then pressing Ctrl + Space . You'll see the autocomplete box,
as shown below:
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad 3/9
5/3/2018 Scratchpad - Firefox Developer Tools | MDN
The icon next to each suggestion indicates the type, and the currently highlighted
suggestion gets a popup with more information. ↑ and ↓ cycle through the suggestions
and Enter or Tab select the highlighted choice.
Inline documentation
To show the inline documentation popup, press Ctrl + Shift + Space when the cursor is
on an identifier. For example, if you type document . addEventListener , then press Ctrl
+ Shift + Space , you'll see a popup that shows a summary of the function's syntax and a
short description:
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad 4/9
5/3/2018 Scratchpad - Firefox Developer Tools | MDN
The "[docs]" link takes you to the MDN documentation for the symbol.
Executing
Once you've written your code, select the code you want to run. If you don't
select anything, all the code in the window will be run. Then choose the way you
want the code to run using the buttons along the top, using the Execute menu, or
using the context menu. The code is executed in the scope of the currently
selected tab. Any variables you declare outside of a function will be added to the
global object for that tab.
Run
When you choose the Run option, the selected code is executed. This is what you'd use to
execute a function or other code that manipulates the content of your page without
needing to see the result.
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad 5/9
5/3/2018 Scratchpad - Firefox Developer Tools | MDN
Inspect
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.
1 window
Then choose Inspect, the object inspector is shown that looks something like this:
Display
The Display option executes the selected code, then inserts the result directly into your
Scratchpad editor window as a comment, so you can use it as a REPL.
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad 6/9
5/3/2018 Scratchpad - Firefox Developer Tools | MDN
1 window
2 /*
3 [object ChromeWindow]
4 */
5
6 gBrowser
7 /*
8 [object XULElement]
9 */
The Scratchpad execution context is set to browser when a snippet file has
// -sp-context: browser
on the first line.
Keyboard shortcuts
Command Windows OS X Linux
Reload the current page, then run Ctrl + Shift + Cmd + Shift + R Ctrl + Shift +
Scratchpad code R R
In the Editor Preferences section of the developer tools settings, you can choose to use
Vim, Emacs, or Sublime Text key bindings instead.
From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences
section of the developer tools settings, and you can set it there instead of about:config .
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad 8/9
5/3/2018 Scratchpad - Firefox Developer Tools | MDN
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad 9/9