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, 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 をご覧ください。

変数

tempN

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

例

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

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

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

inspect($("#title"))

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

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

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

pprint($("#title"))

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