Web Console Helpers

コマンド

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

$()

CSS のセレクタ文字列を探索して、最初にマッチした要素を返します。これは、document.querySelector() と等価です。または、$ 関数がページ内に存在する場合はそれを呼び出します。

$$()

CSS のセレクタ文字列を探索し、マッチした DOM ノードのリストを返します。これは document.querySelectorAll() のショートカットです。

$0

ページ内で現在調査されている要素です。

$x()

XPath の構文を評価して、マッチするノードの配列を返します。

keys()

オブジェクトを与えられると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは object.keys のショートカットです。

values()

オブジェクトを与えられると、そのオブジェクトの値の一覧を返します。これは keys() と対を成すかたちで役立ちます。

clear()

コンソールの出力エリアをクリアします。

inspect()

オブジェクトを与えられると、そのオブジェクトのオブジェクトインスペクタを開きます。

pprint()

指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。

help()

ヘルプを開きます。実際は再帰の面白い例として、このページへ案内します。

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

例

使用例: DOM ノードの内容を閲覧する

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

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

inspect($("#title"))

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

使用例: DOM ノードの内容をダンプする

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

pprint($("#title"))

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