Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 977805 of Scratchpad

  • Revision slug: Tools/Scratchpad
  • Revision title: Scratchpad
  • Revision id: 977805
  • Created:
  • Creator: Sebastianz
  • Is current revision? No
  • Comment Correctly formatted keyboard shortcuts

Revision Content

Scratchpad provides an environment for experimenting with JavaScript code. You can write, run, and examine the results of code that interacts with the web page.

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.

{{EmbedYouTube("Pt7DZACyClM")}}

Usage

Opening Scratchpad

To open the Scratchpad window, press Shift + F4, or go to the Web Developer menu (which is a submenu in the Tools menu on OS X and Linux), then select Scratchpad. This will open up a Scratchpad editor window, which includes a comment that provides some brief information about how to use Scratchpad. From there you can immediately start writing some JavaScript code to try.

Editing

The Scratchpad window looks something like this (on OS X the menu bar is at the top of the screen):

A screenshot of the Scratchpad

The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.

Code completion and inline documentation

Code completion and type information is only available from Firefox 32 onwards.

From Firefox 32 onwards 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. To show the popup, press Shift + Space in Firefox 32 or Ctrl + Shift + Space in Firefox 33+.

For example, try typing D, then pressing Ctrl + Space. You'll see this:

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.

If you select document, then addEventListener, then press Shift + Space you'll see a popup that shows a summary of the function's syntax and a short description:

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.

There are four execution options available.

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.

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.

For example, if you enter the code:

 

Then choose Inspect, the object inspector is shown that looks something like this:

Inspecting an object in the Scratchpad

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.

Reload And Run

The Reload And Run option is only available in the Execute menu. It first reloads the page, then executes the code when the page's "load" event fires. This is useful for running the code in a pristine environment.

Running Scratchpad in the browser context

You can run Scratchpad in the context of the browser as a whole rather than a specific web page. This is useful if you are working on Firefox itself or developing add-ons. To do this check "Enable chrome and add-on debugging" in the Developer Tool Settings. Once you've done this, the Environment menu has a Browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some globals:

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

The Scratchpad execution context is set to browser when a snippet file has
// -sp-context: browser
on the first line.

Keyboard shortcuts

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "scratchpad") }}

Source editor shortcuts

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

Revision Source

<p>Scratchpad provides an environment for experimenting with JavaScript code. You can write, run, and examine the results of code that interacts with the web page.</p>

<p>Unlike the <a href="/en/Tools/Web_Console" title="en/Using the Web Console">Web Console</a>, 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.</p>

<p>{{EmbedYouTube("Pt7DZACyClM")}}</p>

<h2 id="Usage">Usage</h2>

<h3 id="Opening_Scratchpad">Opening Scratchpad</h3>

<p>To open the Scratchpad window, press <kbd>Shift</kbd> + <kbd>F4</kbd>, or go to the Web Developer menu (which is a submenu in the Tools menu on OS X and Linux), then select Scratchpad. This will open up a Scratchpad editor window, which includes a comment that provides some brief information about how to use Scratchpad. From there you can immediately start writing some JavaScript code to try.</p>

<h3 id="Editing">Editing</h3>

<p>The Scratchpad window looks something like this (on OS X the menu bar is at the top of the screen):</p>

<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/5983/scratchpad.png" /></p>

<p>The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.</p>

<h4 id="Code_completion_and_inline_documentation">Code completion and inline documentation</h4>

<div class="geckoVersionNote">
<p>Code completion and type information is only available from Firefox 32 onwards.</p>
</div>

<p>From Firefox 32 onwards Scratchpad integrates the <a href="https://ternjs.net/">tern code analysis engine</a>, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. To list autocomplete suggestions, press <kbd>Ctrl</kbd> + <kbd>Space</kbd>. To show the popup, press <kbd>Shift</kbd> + <kbd>Space</kbd> in Firefox 32 or <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> in Firefox 33+.</p>

<p>For example, try typing <kbd>D</kbd>, then pressing <kbd>Ctrl</kbd> + <kbd>Space</kbd>. You'll see this:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display:block; margin-left:auto; margin-right:auto" />The icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. <kbd>↑</kbd> and <kbd>↓</kbd> cycle through the suggestions and <kbd>Enter</kbd> or <kbd>Tab</kbd> select the highlighted choice.</p>

<p>If you select <code>document</code>, then <code>addEventListener</code>, then press <kbd>Shift</kbd>&nbsp;+ <kbd>Space</kbd> you'll see a popup that shows a summary of the function's syntax and a short description:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display:block; margin-left:auto; margin-right:auto" />The "[docs]" link takes you to the MDN documentation for the symbol.</p>

<h3 id="Executing">Executing</h3>

<p class="note">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.</p>

<p class="note">There are four execution options available.<strong> </strong></p>

<h4 id="Run">Run</h4>

<p>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.</p>

<h4 id="Inspect">Inspect</h4>

<p>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.</p>

<p>For example, if you enter the code:</p>

<pre>
&nbsp;</pre>

<p>Then choose Inspect, the object inspector is shown that looks something like this:</p>

<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png" /></p>

<h4 id="Display">Display</h4>

<p>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 <a href="https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a>.</p>

<h4 id="Reload_And_Run">Reload And Run</h4>

<p>The Reload And Run option is only available in the Execute menu. It first reloads the page, then executes the code when the page's "load" event fires. This is useful for running the code in a pristine environment.</p>

<h2 id="Running_Scratchpad_in_the_browser_context">Running Scratchpad in the browser context</h2>

<p>You can run Scratchpad in the context of the browser as a whole rather than a specific web page. This is useful if you are working on Firefox itself or developing add-ons. To do this check "Enable chrome and add-on debugging" in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Developer Tool Settings</a>. Once you've done this, the Environment menu has a Browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some globals:</p>

<pre class="brush: js">
window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/</pre>

<p>The Scratchpad execution context is set to browser when a snippet file has<br />
 <code>// -sp-context: browser</code><br />
 on the first line.</p>

<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>

<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p>

<h3 id="Source_editor_shortcuts">Source editor shortcuts</h3>

<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
Revert to this revision