コマンド
ウェブコンソールの 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, resultType)
element
のコンテキストで XPathxpath
式を評価し、一致するノードの配列を返します。 未指定の場合、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 での作業 をご覧ください。
- 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 ノード以外のオブジェクトに対しても役に立ちますので、アイデアを考えてみてください。