コマンド
Web コンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。
$()- CSS のセレクタ文字列を探索して、最初にマッチした要素を返します。これは
document.querySelector()と等価です。または、$ 関数がページ内に存在する場合はそれを呼び出します。 $$()- CSS のセレクタ文字列を探索して、マッチした DOM ノードのリストを返します。これは
document.querySelectorAll()のショートカットです。
Firefox 41 より、このメソッドはdocument.querySelectorAll()のショートカットではなくなり、代わりに要素の配列を返します。 $0- ページ内で現在調査されている要素です。
$_- Firefox 39 の新機能。コンソールのコマンドラインで最後に実行した式の結果を保持します。例えば "2+2 <enter>" と入力した後に "$_ <enter>" と入力すると、コンソールは 4 と出力します。
$x()- XPath の構文を評価して、マッチするノードの配列を返します。
keys()- オブジェクトを与えると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは
Object.keysのショートカットです。 values()- オブジェクトを与えると、そのオブジェクトの値の一覧を返します。これは
keys()と対をなすものです。 clear()- コンソールの出力エリアをクリアします。
inspect()- オブジェクトを与えると、そのオブジェクトのオブジェクトインスペクタを開きます。
pprint()- 指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。
help()- ヘルプを開きます。実際は再帰の面白い例として、このページへ案内します。
cd()-
JavaScript の評価を行うコンテキストを、ページ内の別の iframe に切り替えます。このコマンドは切り替え先のフレームを識別するための、さまざまな方法を受け入れます。以下のいずれかを与えることができます:
- iframe 要素を特定するため、
document.querySelectorに渡すセレクタ文字列 - iframe 要素自体
- iframe 内部の content window
iframe での作業をご覧ください。
- iframe 要素を特定するため、
copy()- Firefox 38 の新機能。 引数で指定したものをクリップボードにコピーします。引数が文字列である場合は、そのままコピーします。また引数が DOM ノードである場合は、ノードの
outerHTMLをコピーします。他の値である場合は引数に対してJSON.stringifyを呼び出して、その結果をコピーします。 clearHistory()- Firefox 39 の新機能。一般的なコマンドラインと同様に、コンソールのコマンドラインも過去に入力したコマンドを覚えています。この関数を実行すると、コンソールのコマンドラインの履歴を消去します。
- コンテンツからログを出力する機能について、詳しくは Console API をご覧ください。
例
使用例: DOM ノードの内容を閲覧する
例えば、ID 値 "title" を持つ DOM ノードがあるとします。実際は、今見ているこのページに該当する DOM ノードがありますので、ここで Web コンソールを開いて試してみることができます。
$() および inspect() を用いて、ノードのコンテンツを確認してみましょう:
inspect($("#title"))
自動的にオブジェクトインスペクタが開き、CSS セレクタ "#title" にマッチする DOM ノードの内容を表示します。もちろんそれは、ID が "title" である要素です。
使用例: DOM ノードの内容をダンプする
これは、あなたがブラウザ上で起きている問題を調査することになり、ユーザのために遠隔地でデバッグを行うことや、ノードの内容を閲覧する必要があるような場合に役立ちます。ユーザに Web コンソールを開いてもらい、pprint() を用いてノードの内容をログにダンプし、その出力結果をメールにコピー & 貼り付けして送付してもらうことができます:
pprint($("#title"))
これはノードの内容を読みやすい形式で出力します。もちろん、このコマンドは DOM ノード以外のオブジェクトに対しても役に立ちますので、アイデアを考えてみてください。