Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

スクラッチパッド

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

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

使用方法

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

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

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

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

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

Firefox 47 の新機能

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

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

編集

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

A screenshot of the Scratchpad

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

コード補完

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

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

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

インラインドキュメント

識別子にカーソルがあるときに Ctrl + Shift + Space を押下すると、インラインドキュメントをポップアップ表示します。例えば document.addEventListener と入力して Ctrl + 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
オートコンプリート候補を表示する Ctrl + Space Ctrl + Space Ctrl + Space
インラインドキュメントを表示する 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 + /

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

 このページの貢献者: yyss, Uemmra3, wbamberg, teoli
 最終更新者: yyss,