Scratchpad - Firefox 开发者工具 编辑

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

和被设计为一次只能执行单行命更多工具令的 Web Console 不同的是， Scratchpad 让你可以编辑大段的Javascript代码, 然后就取决于你希望如何输出，有多种方式执行这些代码。

使用

在单独窗口中打开Scratchpad

有几种不同的方式可以在独立窗口中打开Scratchpad

• 按下Shift + F4, 开启Scratchpad窗口，或是从Web Developer 菜单 (在OS X 和Linux 中是Tools菜单的子菜单) 中选择Scratchpad，开启的Scratchpad包含一个提供如何使用Scratchpad的帮助信息的注释。从这里你能直接开始书写代码。
• 点击扳手图标 (), 你可以在主工具栏或者汉堡菜单 ()找到, 然后选择"Scratchpad".

这都能在单独窗口中打开Scratchpad。

从工具箱中打开Scratchpad

从Firefox 47起，你能从Toolbox中打开Scratchpad。首先你需要在设置的"Default Firefox Developer Tools"部分里选中"Scratchpad"。

现在你应该可以在Toolbox中使用Scratchpad了，还有其他工具，如页面检查器和Web控制台。这在拆分控制台模式下特别有用：您可以使用Scratchpad作为持久性，多行编辑器，或者控制台来与页面进行交互。

编辑

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

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

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

代码补完

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

例如，键入d, 然后按下Control + Space。 你可以看到自动补完的弹框，类似如下

每个显示在建议之前的图标表明了类型，当前高亮显示的会弹出更多的信息，使用↑ 或 ↓箭头切换选项并使用Enter 或 Tab来选择高亮的选项。

內连文档

当鼠标位于某个标识符上时，通过按下 Ctrl + Shift + Space 进行显示内连文档的弹框. 举个例子, 当你输入 document.addEventListener, 人后按下 Ctrl + Shift + Space, 你将会看到该方法的语法摘要以及一段简介:

这个"[docs]"链接指向该标志的MDN文档

Executing

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

这里有4个可用的选项：

Run

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

Inspect

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

例如，当你敲入这段代码

window

然后选择Inspect，对象检查器就会显示如下：

Display

Display选项执行选中的代码，然后直接将结果作为一个注解插入到你的Sratchpad编辑窗口，所以你可以把它当作一个REPL

Reload And Run

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

在浏览器上下文中运行Scratchpad

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

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

Scratchpad的执行环境在该状态下将被设置为browser：当代码段的第一行为
// -sp-context: browser

Keyboard shortcuts

Source editor shortcuts

此表列出了代码编辑器的默认快捷键。

在开发工具选项的编辑器偏好中，您可以选择使用 Vim、Emacs 或 Sublime Text 的快捷键。

选择这些,访问 about:config，选择设定 devtools.editor.keymap 的值为 "vim" 或 "emacs"或 "sublime"。通过这个设定。通过该方法你可以设定开发者工具中所有的代码编辑器使用的快捷键。并且你需要重新启动编辑器更改才能生效。

从 Firefox 33 起，更改编辑器快捷键可以通过开发者工具箱选项中的编辑器偏好实现。而不需要通过 about:config。