スクラッチパッド

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

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

使用方法

個別のウィンドウでスクラッチパッドを開く

個別のウィンドウでスクラッチパッドを開く方法がいくつかあります:

• Shift + F4 を押下するか、Web 開発メニュー (OS X や Linux ではツールメニューのサブメニューとして存在します) でスクラッチパッドを選択します。
• メインツールバーまたはハンバーガーメニュー () の中にあるレンチのアイコン () をクリックして、"スクラッチパッド" を選択します。

個別のウィンドウでスクラッチパッドが開きます。

ツールボックス内にスクラッチパッドを開く

Firefox 47 より、ツールボックス の内部にスクラッチパッドを開くことができます。始めに、オプション ページで "標準の Firefox 開発ツール" の "スクラッチパッド" にチェックを入れなければなりません。

以上でスクラッチパッドが、ページインスペクターや Web コンソールなど他のツールと並んで、ツールボックス内で使用できます。これは、コンソールの常時表示 で特に役立ちます。スクラッチパッドを持続的なマルチランエディターとして、またコンソールをページと対話するツールとして使用できます。

編集

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

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

コード補完

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

例えば、d と入力して Ctrl + Space を押下してみましょう。以下のように、オートコンプリートボックスを表示します:

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

インラインドキュメント

識別子にカーソルがあるときに Ctrl + Shift + Space を押下すると、インラインドキュメントをポップアップ表示します。例えば document.addEventListener と入力して Ctrl + Shift + Space を押下すると、関数の構文や簡単な説明といった概要を記載したポップアップを表示します:

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

実行

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

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

実行

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

調査

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

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

window

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

表示

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

再読み込みして実行

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

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

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

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

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

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

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

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

開発ツールのオプションのエディタ設定で、キーバインドとして Vim、Emacs、Sublime Text を選択できます。

あるいは、about:config で設定項目 devtools.editor.keymap を選択して "vim"、"emacs"、または "sublime" を設定してください。この設定によりソースエディタを使用するすべての開発ツールで、選択したキーバインドを使用します。設定を反映させるには、エディタを開き直さなければなりません。

Firefox 33 よりキーバインドの設定を開発ツールのオプションのエディタ設定に配置しましたので、about:config に代わりここで設定できます。