Scratchpad

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.

Scratchpad 提供一种 JavaScript 代码的编辑环境。你能写，执行 并且 查看 代码和Web页面交互的结果

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. 

 Web Console 一次执行一行，和 Web Console 不同的是， Scratchpad 是你可以编辑大段的Javascript代码, 然后取决于你希望如何输出的方式，有多种方式执行这些代码。

Usage

使用

Opening Scratchpad

开启 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.

按下 Shift+F4, 开启Scratchpad窗口，或是从Web Developer 菜单 (在OS X 和Linux 中是Tools菜单的子菜单) 中 选择Scratchpad，开启的Scratchpad包含一个提供如何使用Scratchpad的帮助信息的注释。从这里你能直接开始书写代码。

Editing

编辑

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

Scratchpad 窗口 看起来如下图 (在OS X中菜单条在屏幕顶部)

See Using the Source Editor for documentation about the editor itself, including useful keyboard shortcuts.

如果想了解编辑器本身 或者有用的键盘快捷键，请查看 Using the Source Editor

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

文件菜单提供 Javascript 代码的保存和加载，以便以后你能反复使用这些代码。

Code completion and inline documentation

代码补完 和 在线文档

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

从 Firefox 32 版本开始 Scratchpad 使用  tern code analysis engine 提供自动补完建议并使用弹出窗口显示当前符号的关于信息。使用 Control + Space 便可以呼出自动补完。如果是为了显示弹出信息， 在Firefox 32中使用Shift + Space ，在Firefox 33+中使用Ctrl + Shift + Space .

For example, try typing "d", then pressing Control+Space. You'll see this:

例如， 键入 d, 然后按下 Control + Space。 你可以看到

The icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. Up and Down arrows cycle through the suggestions and Enter or Tab select the highlighted choice.

每个提示的图标表明了它的类型，当前高亮显示的会弹出更多的信息，通过上下键并按下Enter或Tab键选择高亮的选项。

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:

如果你选了document，然后addEventListener，再按下 Shift+Space你就可以看到弹出条显示了函数的语法跟简要的描述。

The "[docs]" link takes you to the MDN documentation for the symbol. But note that the link currently opens in the Scratchpad window, giving you no way to get back to the pad. So don't click that link. This issue is being tracked as bug 1026560.

这个"[docs]"链接指向该标志的MDN文档，但是要注意的是这个链接会在Scratchpad窗口打开，让你没办法返回到pad，所以不要点击那个链接。这个问题已经被追踪为bug 1026560。

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.

当你写好了你的代码后，选中你想要的代码来运行。如果你没有选中任何代码，整个窗口的代码都会被执行。选择你想要的运行方式，可以通过顶部的按钮、运行菜单，或者上下文菜单。代码会在当前选中的Tab范围内被执行。你在函数外声明的变量会被加到Tab的全局对象中

There are four execution options available.

这里有4个可用的选项：

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.

当你选择Run选项，选中的代码会被执行。这是用来执行那些只是操纵页面内容而不需要返回结果的函数或者其他代码的。

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.

Inspect选项会像Run选项一样执行代码，但是当代码返回时会打开一个对象检查器让你验证返回值

For example, if you enter the code:

window

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

例如，当你敲入这段代码，然后选择Inspect，对象检查器就会显示如下：

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.

Display选项执行选中的代码，然后直接将结果作为一个注解插入到你的Sratchpad编辑窗口，所以你可以把它当作一个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.

Reload And Run选项只在执行菜单可用，它首先重新加载页面，然后当页面加载完毕执行代码。这在比较古老的运行环境中比较有用。

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 addon 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:

你可以在整个浏览器的上下文环境运行Sratchpad，而不只是在指定的网页中。这在你使用Firefox工作或开发插件时很有用。要使用这个请在Developer Tool Settings中确认允许chrome跟插件调试。设置完后环境菜单会有个浏览器选项。选中它的时候，你的作用域就是整个浏览器而不只是页面范围了，从下面的测试中可以看出一些全局变量。

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

Keyboard shortcuts

Source editor shortcuts

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

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.