mozilla

Revision 25215 of Scratchpad

  • Revision slug: Tools/Scratchpad
  • Revision title: Scratchpad
  • Revision id: 25215
  • Created:
  • Creator: yyss
  • Is current revision? No
  • Comment 10 words added

Revision Content

{{ gecko_minversion_header("6.0") }}

The Scratchpad tool built into Firefox 6 and later provides a handy environment for experimenting with JavaScript code. You can write code that can interact with the contents of a web page, so you can test out ideas before switching to your usual web site development tools to write the final code. Or you can use it to tinker and play with existing sites.

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.

Using Scratchpad

To open the Scratchpad window, go to the Web Developer menu (which is a submenu in the Tools menu on the Mac), 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.

The Scratchpad window looks something like this (on Windows and Linux, you'll also have your menu bar there, while on the Mac, the menu bar is at the top of the screen as usual):

scratchpad.png

At the bottom, you see the current execution scope for your code; in this case, it's "Content," or the content of the current page. See {{ anch("Scratchpad scope") }} for details.

{{ gecko_callout_heading("10.0") }}

Gecko 10.0 {{ geckoRelease("10.0") }} replaced the editor in the Scratchpad with Orion, which provides syntax highlighting, improved indentation, and other features. In addition, the content of the Scratchpad window is now saved using the Firefox session restore feature, so it's now persistent across restarts of Firefox.

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

Executing your code

Once you've written your code, select the code you want to run, then right-click (or go to the Execute menu in the menu bar) and choose the way you want to run your code. There are three execution options available.

Note: If you don't select anything, all the code in the window will be run.

Run

When you choose the Run option, the selected code executed. This is what you'd use to execute a function or other code that manipulates the content of your page.

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:

window

Then choose Inspect, you get an inspector window that may look something like this:

inspector.png

Display

The Display option executes the selected code, then inserts the result directly into your Scratchpad editor window as a comment. This is a convenient way to keep a running log of the results of your tests while you work. You can also use it as a calculator, in a pinch, although if you don't already have a better calculator program, you may have bigger problems.

Cleaning up

You can reset all variables by choosing the "Reset Variables" option in the Execute menu or in the context menu that appears when you right-click in the Scratchpad window.

Scratchpad usage scenarios

There are lots of ways Scratchpad can be useful. This section covers a few of them.

Testing new code

Scratchpad is particularly useful for testing new code in a live browser environment; you can copy the code you're debugging into Scratchpad and run it, then tweak it until it works. Once it's working, copy it back into your main code file and you're done. In many cases, you can write, debug, and test your code without ever having to reload the page.

Reusable code snippets

The menu bar in Scratchpad offers commands for saving and loading JavaScript code. This facility can be used to keep around bits of JavaScript code you often use. For example, if you're working on a site that uses AJAX requests to load data, you can keep snippets around that perform those load operations for testing or verification of data. Similarly, you can keep around helpful general-purpose debugging functions, such as functions that dump out particular types of information about the DOM.

Scratchpad scope

Code you run in Scratchpad is executed in a sandbox that has access to everything on your page, but won't leak new variables onto the page. If you expressly want to put variables on your page, you can do so by putting them in the {{ domxref("window") }} object:

window.myVariable = value;

The new window.myVariable value, in this case, is accessible to scripts running on the page.

Note: This sandboxing works just like Web Console. However, unlike Web Console, the Scratchpad follows you from tab to tab; the code you run in it always executes against the current tab in the frontmost browser window. This can, for example, be used to perform the same test against multiple servers.

Using Scratchpad to access Firefox internals

If you're working on Firefox itself, or developing add-ons, you may find it useful to be able to access all of the browser's internals using Scratchpad. To do this, you need to set the devtools.chrome.enabled preference to true using about:config. 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.

{{ languages( { "es": "es/Herramientas/Borrador", "fr": "fr/Outils/Ardoise", "ja": "ja/Tools/Scratchpad" } ) }}

Revision Source

<p>{{ gecko_minversion_header("6.0") }}</p>
<p>The Scratchpad tool built into Firefox 6 and later provides a handy environment for experimenting with JavaScript code. You can write code that can interact with the contents of a web page, so you can test out ideas before switching to your usual web site development tools to write the final code. Or you can use it to tinker and play with existing sites.</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>
<h2>Using Scratchpad</h2>
<p>To open the Scratchpad window, go to the Web Developer menu (which is a submenu in the Tools menu on the Mac), 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>
<p>The Scratchpad window looks something like this (on Windows and Linux, you'll also have your menu bar there, while on the Mac, the menu bar is at the top of the screen as usual):</p>
<p><img alt="scratchpad.png" class="internal default" src="/@api/deki/files/5566/=scratchpad.png" style=""></p>
<p>At the bottom, you see the current execution scope for your code; in this case, it's "Content," or the content of the current page. See {{ anch("Scratchpad scope") }} for details.</p>
<div class="geckoVersionNote">{{ gecko_callout_heading("10.0") }} <p>Gecko 10.0 {{ geckoRelease("10.0") }} replaced the editor in the Scratchpad with <a class="external" href="http://eclipse.org/orion/" title="http://eclipse.org/orion/">Orion</a>, which provides syntax highlighting, improved indentation, and other features. In addition, the content of the Scratchpad window is now saved using the Firefox session restore feature, so it's now persistent across restarts of Firefox.</p>
</div>
<p>The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.</p>
<h3>Executing your code</h3>
<p>Once you've written your code, select the code you want to run, then right-click (or go to the Execute menu in the menu bar) and choose the way you want to run your code. There are three execution options available.</p>
<div class="note"><strong>Note:</strong> If you don't select anything, all the code in the window will be run.</div>
<h4>Run</h4>
<p>When you choose the Run option, the selected code executed. This is what you'd use to execute a function or other code that manipulates the content of your page.</p>
<h4>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>window
</pre>
<p>Then choose Inspect, you get an inspector window that may look something like this:</p>
<p><img alt="inspector.png" class="internal default" src="/@api/deki/files/5565/=inspector.png"></p>
<h4>Display</h4>
<p>The Display option executes the selected code, then inserts the result directly into your Scratchpad editor window as a comment. This is a convenient way to keep a running log of the results of your tests while you work. You can also use it as a calculator, in a pinch, although if you don't already have a better calculator program, you may have bigger problems.</p>
<h2>Cleaning up</h2>
<p>You can reset all variables by choosing the "Reset Variables" option in the Execute menu or in the context menu that appears when you right-click in the Scratchpad window.</p>
<h2>Scratchpad usage scenarios</h2>
<p>There are lots of ways Scratchpad can be useful. This section covers a few of them.</p>
<h3>Testing new code</h3>
<p>Scratchpad is particularly useful for testing new code in a live browser environment; you can copy the code you're debugging into Scratchpad and run it, then tweak it until it works. Once it's working, copy it back into your main code file and you're done. In many cases, you can write, debug, and test your code without ever having to reload the page.</p>
<h3>Reusable code snippets</h3>
<p>The menu bar in Scratchpad offers commands for saving and loading JavaScript code. This facility can be used to keep around bits of JavaScript code you often use. For example, if you're working on a site that uses AJAX requests to load data, you can keep snippets around that perform those load operations for testing or verification of data. Similarly, you can keep around helpful general-purpose debugging functions, such as functions that dump out particular types of information about the DOM.</p>
<h2>Scratchpad scope</h2>
<p>Code you run in Scratchpad is executed in a sandbox that has access to everything on your page, but won't leak new variables onto the page. If you expressly want to put variables on your page, you can do so by putting them in the {{ domxref("window") }} object:</p>
<pre>window.myVariable = value;
</pre>
<p>The new <code>window.myVariable</code> value, in this case, is accessible to scripts running on the page.</p>
<div class="note"><strong>Note:</strong> This sandboxing works just like <a href="/en/Tools/Web_Console" title="en/Using the Web Console">Web Console</a>. However, unlike Web Console, the Scratchpad follows you from tab to tab; the code you run in it always executes against the current tab in the frontmost browser window. This can, for example, be used to perform the same test against multiple servers.</div>
<h3>Using Scratchpad to access Firefox internals</h3>
<p>If you're working on Firefox itself, or developing add-ons, you may find it useful to be able to access all of the browser's internals using Scratchpad. To do this, you need to set the <code>devtools.chrome.enabled</code> preference to <code>true</code> using <code>about:config</code>. 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.</p>
<p>{{ languages( { "es": "es/Herramientas/Borrador", "fr": "fr/Outils/Ardoise", "ja": "ja/Tools/Scratchpad" } ) }}</p>
Revert to this revision