Scratchpad

这篇翻译不完整。请帮忙从英语翻译这篇文章

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

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

使用

在单独窗口中打开Scratchpad

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

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

从工具箱打开Scratchpad

New in Firefox 47.

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

现在你可以在Toolbox中使用Scratchpad,以及其他工具,如页面检查器和Web控制台。这在拆分控制台模式下特别有用:您可以使用Scratchpad作为持久性,多行编辑器,并且控制台可以与页面进行交互。

编辑

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

A screenshot of the Scratchpad

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

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

代码补完 和 在线文档

代码补完和类型信息功能只在Firefox 32及以后版本中生效。

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

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

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

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

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

Executing

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

这里有4个可用的选项:

Run

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

Inspect

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

例如,当你敲入这段代码

window

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

Inspecting an object in the Scratchpad

Display

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

Reload And Run

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

Running Scratchpad in the browser context

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

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

Keyboard shortcuts

命令 Windows OS X Linux
打开代码草稿纸 Shift + F4 Shift + F4 Shift + F4
运行代码草稿纸代码 Ctrl + R Cmd + R Ctrl + R
运行代码草稿纸代码,并对返回值使用对象查看器 Ctrl + I Cmd + I Ctrl + I
运行代码草稿纸代码,在选中内容后面以注释的形式插入返回的结果 Ctrl + L Cmd + L Ctrl + L
重新评估当前函数 Ctrl + E Cmd + E Ctrl + E
重新加载代码,并运行 Ctrl + Shift + R Cmd + Shift + R Ctrl + Shift + R
保存当前到文件 Ctrl + S Cmd + S Ctrl + S
打开已有文件 Ctrl + O Cmd + O Ctrl + O
创建一个新代码 Ctrl + N Cmd + N Ctrl + N
关闭代码草稿纸 Ctrl + W Cmd + W Ctrl + W
打印草稿纸中代码 Ctrl + P Cmd + P Ctrl + P
显示自动补全建议(Firefox 32新增) Ctrl + Space Ctrl + Space Ctrl + Space
显示内联文档(尽显Firefox 32) Shift + Space Shift + Space Shift + Space
显示内联文档(Firefox 33 及更新) Ctrl + Shift + Space Ctrl + Shift + Space Ctrl + Shift + Space

Source editor shortcuts

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

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

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

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

命令 Windows OS X Linux
跳转到某行 Ctrl + J Cmd + J Ctrl + J
查找 Ctrl + F Cmd + F Ctrl + F
查找下一个 Ctrl + G Cmd + G Ctrl + G
全选 Ctrl + A Cmd + A Ctrl + A
剪切 Ctrl + X Cmd + X Ctrl + X
复制 Ctrl + C Cmd + C Ctrl + C
粘贴 Ctrl + V Cmd + V Ctrl + V
撤销 Ctrl + Z Cmd + Z Ctrl + Z
重做 Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
缩进 Tab Tab Tab
取消缩进 Shift + Tab Shift + Tab Shift + Tab
上移行 Alt + Up Alt + Up Alt + Up
下移行 Alt + Down Alt + Down Alt + Down
注释/取消注释行 Ctrl + / Cmd + / Ctrl + /

文档标签和贡献者

 此页面的贡献者: snopein, lixuanh, maybe, Zhoubaochen, liang
 最后编辑者: snopein,