スクラッチパッド

by 3 contributors:

スクラッチパッドは、JavaScript の実験環境を提供します。Web ページと対話するコードの記述、実行、結果の確認ができます。

一度に 1 行のコードを実行するよう設計されている Web コンソールとは異なり、スクラッチパッドはより大きな JavaScript コードのかたまりを編集でき、そして出力結果の用途に応じたさまざまな方法でコードを実行することができます。

使用方法

スクラッチパッドを開く

スクラッチパッドのウィンドウを開くには Shift F4 を押下するか、Web 開発メニュー (OS X や Linux ではツールメニューのサブメニューとして存在します) でスクラッチパッドを選択します。すると、スクラッチパッドの編集ウィンドウが開きます。ウィンドウ内には、スクラッチパッドの使い方を簡潔に示すコメントが記載されています。そこから直ちに、JavaScript のコードを書き始めることができます。

編集

スクラッチパッドのウィンドウは以下のような外見です (OS X では画面上部にメニューバーが表示されます):

A screenshot of the Scratchpad

ファイルメニューでは JavaScript コードの保存や読み込みを行うことができますので、後でコードを再利用することができます。

コード補完とインラインドキュメント

コード補完と型情報は、Firefox 32 以降で使用できます。

Firefox 32 より、スクラッチパッドに tern コード解析エンジンを統合して、オートコンプリートの候補やカレントシンボルに関する情報を表示するポップアップを提供するために使用しています。Ctrl Space を押下すると、オートコンプリート候補を表示します。Firefox 32 では Shift Space、Firefox 33 以降では Ctrl Shift Space を押下すると、ポップアップを表示します。

例えば、d と入力して Ctrl Space を押下してみましょう。すると、以下のようになります:

各候補の隣にあるアイコンは、型を示します。またハイライト中の候補について、詳細情報をポップアップで表示します。 および キーで候補を行き来でき、Enter または Tab でハイライト中の候補を選択します。

documentaddEventListener の順に選択して Shift Space を押下すると、関数の構文や簡単な説明といった概要を記載したポップアップを表示します:

"[docs]" は、そのシンボルに関する MDN のドキュメントへのリンクです。

実行

コードを記述したら、実行したいコードを選択してください。何も選択しない場合は、ウィンドウ内のコードすべてを実行します。そして、コードの実行方法を上部のボタン、実行メニュー、またはコンテキストメニューで選択してください。コードは現在選択しているタブのスコープで実行します。関数の外部で宣言した変数は、そのタブのグローバルオブジェクトに追加されます。

実行方法は 4 種類あります。

実行

実行を選択すると、選択したコードが実行されます。これは結果を確認する必要性がない、ページのコンテンツを操作する関数や他のコードを実行するものです。

調査

調査は、コードを実行オプションのように実行します。ただし、実行後に戻り値の検証を行うことができるオブジェクトインスペクタが開きます。

例えば、以下のコードを入力します:

window

そして調査を選択すると、以下のようなオブジェクトインスペクタが表示されます:

Inspecting an object in the Scratchpad

表示

表示は選択されたコードを実行して、その結果をスクラッチパッドのエディタ内にコメントとして挿入しますので、REPL として使用できます。

再読み込みして実行

再読み込みして実行は、実行メニューからのみ使用できます。始めにページを再読み込みして、ページの "load" イベントが発生したときのコードを実行します。これは、クリーンな環境でコードを実行するのに役立ちます。

ブラウザコンテキストでスクラッチパッドを実行する

スクラッチパッドは特定の Web ページだけでなく、ブラウザ全体のコンテキストでも実行できます。これは Firefox 自体での作業やアドオンの開発で役立ちます。これを行うには、開発ツールのオプションで "ブラウザとアドオンのデバッガを有効" にチェックを入れてください。すると、実行環境メニューにブラウザという選択肢が加わります。これを選択すると、いくつかのグローバルオブジェクトを調査するとわかるとおり、スコープがページのコンテンツではなくブラウザ全体になります:

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

スニペットファイルの先頭行に
// -sp-context: browser
と記入した場合は、スクラッチパッドの実行コンテキストがブラウザに設定されます。

キーボードショートカット

  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

ソースエディタのショートカット

以下の表は、ソースエディタのデフォルトのショートカットの一覧です。

開発ツールのオプションのエディタ設定で、キーバインドとして 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 + Alt + Alt +
行を下へ移動 Alt + Alt + Alt +
行のコメント化/コメント解除 Ctrl + / Cmd + / Ctrl + /

ドキュメントのタグと貢献者

Contributors to this page: wbamberg, yyss, teoli
最終更新者: wbamberg,