ウェブコンソールのコマンドラインで、JavaScript の構文を即座に評価することができます。

式を入力する

式の入力方法は、コマンドラインに入力して Enter を押下するだけです。複数行の式を入力する場合は、Enter の代わりに Shift+Enter を使用します。

入力した式をメッセージ表示ウィンドウにエコー出力して、その後に結果を出力します:

Firefox 47 の新機能

Firefox 47 より、Enter を押下したときに入力が完了していないと思われる場合は、Shift+Enter として扱い、入力を完了できるようになりました。

例えば、以下のように入力します:

function foo() {

そして Enter を押下すると、コンソールは直ちに入力内容を実行せずに Shift+Enter を押下したかのように動作しますので、関数定義の入力を完了できます。

変数にアクセスする

ページで定義している変数にアクセスすることができ、window のように組み込み済みの変数と jQuery のように JavaScript で追加した変数のどちらでも可能です:

オートコンプリート

コマンドラインにオートコンプリート機能があります。最初の数文字を入力すると、考えられる完成形を示すポップアップを表示します:

候補を受け入れるには Enter または Tab を押下します。また上/下矢印キーで別の候補へ移動できます。どの候補も望まない場合は入力を続けてください。

コンソールは、現在実行中のスタックフレームのスコープから候補を提示します。これにより関数内でブレークポイントに当たった場合は、関数内のローカルオブジェクトもオートコンプリートの対象になります。

配列要素向けのオートコンプリート候補も表示します:

変数を定義する

独自の変数を定義したり、その変数にアクセスしたりできます:

コマンド履歴

コマンドラインは、あなたが入力したコマンドを覚えています: 上下矢印キーで、履歴を行き来できます。

Firefox 39 より、この履歴はセッションをまたいで維持するようになりました。履歴をクリアするには、clearHistory() 支援コマンド を使用してください。

iframe で作業する

ページに インラインフレーム を埋め込んでいる場合は、cd() コマンドで特定のインラインフレームにコンソールのスコープを切り替えることができます。また、インラインフレームで表示しているドキュメントで定義した関数を実行できます。cd() でインラインフレームを選択する方法は 3 通りあります:

インラインフレームの DOM 要素を渡すことができます:

var frame = document.getElementById("frame1");
cd(frame);

インラインフレームにマッチする CSS セレクターを渡すことができます:

cd("#frame1");

インラインフレームの window グローバルオブジェクトを渡すことができます:

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

トップレベルの window にコンテキストを戻す場合は、引数を与えずに cd() を呼び出してください:

cd();

例えば、インラインフレームを埋め込んだドキュメントがあるものとします:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

インラインフレームで新たな関数を定義しています:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function whoAreYou() {
        return "I'm frame1";
      }
   </script>
  </head>
  <body>
  </body>
</html>

以下のようにしてコンテキストをインラインフレームに切り替えることができます:

cd("#frame1");

グローバル window の document がインラインフレームであることがわかります:

また、インラインフレーム内で定義した関数を呼び出すことができます:

支援コマンド

ウェブコンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。

$(selector, element)

CSS セレクタ文字列 selector を検索し、一致する element の子孫ノードを返します。未指定の場合、element のデフォルトは document です。document.querySelector() と同等で、ページ内に $ 関数が存在する場合はそれを呼び出します。

QuerySelector コードスニペット参照してください。

$$(selector, element)
CSS セレクタ文字列 selector を検索し、一致する element の子孫である DOM ノードの配列を返します。未指定の場合、element のデフォルトは document です。これは document.querySelectorAll() と似ていますが、NodeList ではなく配列を返します。
$0
ページ内で現在調査されている要素です。
$_
コンソールのコマンドラインで最後に実行した式の結果を保持します。例えば "2+2 <enter>" と入力した後に "$_ <enter>" と入力すると、コンソールは 4 と出力します。
$x(xpath, element)
element のコンテキストで XPath xpath 式を評価し、一致するノードの配列を返します。 未指定の場合、element のデフォルトは document です。
keys()
オブジェクトを与えると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは Object.keys のショートカットです。
values()
オブジェクトを与えると、そのオブジェクトの値の一覧を返します。これは keys() と対をなすものです。
clear()
コンソールの出力エリアをクリアします。
inspect()
オブジェクトを与えると、そのオブジェクトのオブジェクトインスペクターを開きます。
pprint()
指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。
help()非推奨 Gecko 62
:helpGecko 62 が必要
ヘルプテキストを表示します。 実際、再帰の愉快な例では、このページに移動します。
cd()

JavaScript の評価を行うコンテキストを、ページ内の別の iframe に切り替えます。このコマンドは切り替え先のフレームを識別するための、さまざまな方法を受け入れます。以下のいずれかを与えることができます:

  • iframe 要素を特定するため、document.querySelector に渡すセレクター文字列
  • iframe 要素自体
  • iframe 内部の content window

iframe での作業 をご覧ください。

copy()
Firefox 38 の新機能。 引数で指定したものをクリップボードにコピーします。引数が文字列である場合は、そのままコピーします。また引数が DOM ノードである場合は、ノードの outerHTML をコピーします。他の値である場合は引数に対して JSON.stringify を呼び出して、その結果をコピーします。
clearHistory()
Firefox 39 の新機能。一般的なコマンドラインと同様に、コンソールのコマンドラインも 過去に入力したコマンドを覚えています。この関数を実行すると、コンソールのコマンドラインの履歴を消去します。
:screenshot
提供されたファイル名で現在のページのスクリーンショットを作成します。ファイル名を指定しない場合、画像ファイルの名前は次のようになります。

Screen Shot yyy-mm-dd at hh.mm.ss.png

このコマンドには、次のオプションのパラメータがあります。
 
コマンド 説明
--clipboard boolean このパラメータがある場合は、スクリーンショットがクリップボードにコピーされます。
--delay number スクリーンショットを撮るまでに遅らせる秒数。
--dpr number スクリーンショットを撮るときに使用するデバイスのピクセル比率。
--file boolean これがある場合、他のオプション (--clipboard など) が含まれていても、スクリーンショットはファイルに保存されます。
--filename string ファイルの保存に使用する名前。ファイルの拡張子は ".png" にする必要があります。
--fullpage boolean これがある場合は、Web ページ全体が保存されます。このパラメータを使用すると、ウィンドウの現在の範囲外にある Web ページの部分であってもスクリーンショットに含まれます。使用したときは、ファイル名に "-fullpage" が追加されます。
--selector string ページ上の単一要素の CSS クエリーセレクタ。これが渡されると、この要素のみがスクリーンショットに含まれます。

コンテンツからログを出力する機能について、詳しくは Console API をご覧ください。

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

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