Web コンソールヘルパー

コマンド

ウェブコンソールの 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, elemen, resultType)
element のコンテキストで XPath xpath 式を評価し、一致するノードの配列を返します。 未指定の場合、element のデフォルトは document です。resultTypeには戻り値の型を指定します。取りうる値は XPathResult定数か "number"、 "string"、 "bool"、 "node"、 "nodes" のいずれかです。指定されなかった場合、 ANY_TYPE になります。
keys()
オブジェクトを与えると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは Object.keys のショートカットです。
values()
オブジェクトを与えると、そのオブジェクトの値の一覧を返します。これは keys() と対をなすものです。
clear()
コンソールの出力エリアをクリアします。
inspect()
オブジェクトを与えると、そのオブジェクトのオブジェクトインスペクターを開きます。
pprint()
指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。
help()非推奨 Gecko 62
:help
ヘルプテキストを表示します。 実のところ、再びこのページに移動するという愉快な挙動を示します。
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 をご覧ください。

変数

tempN
インスペクターの "コンソールで使う" は、参照しているノードを表す変数 temp0、temp1、temp2 などを生成します。

例

DOM ノードの内容を閲覧する

例えば、ID 値 "title" を持つ DOM ノードがあるとします。実際は、今見ているこのページに該当する DOM ノードがありますので、ここでウェブコンソールを開いて試してみることができます。

$() および inspect() を用いて、ノードのコンテンツを確認してみましょう:

inspect($("#title"))

自動的にオブジェクトインスペクターが開き、CSS セレクター "#title" にマッチする DOM ノードの内容を表示します。もちろんそれは、ID が "title" である要素です。

DOM ノードの内容をダンプする

これは、あなたがブラウザー上で起きている問題を調査することになり、ユーザーのために遠隔地でデバッグを行うことや、ノードの内容を閲覧する必要があるような場合に役立ちます。ユーザーにウェブコンソールを開いてもらい、pprint() を用いてノードの内容をログにダンプし、その出力結果をメールにコピー & 貼り付けして送付してもらうことができます:

pprint($("#title"))

これはノードの内容を読みやすい形式で出力します。もちろん、このコマンドは DOM ノード以外のオブジェクトに対しても役に立ちますので、アイデアを考えてみてください。