Web Console Helpers

コマンド

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

$()
CSS のセレクター文字列を探索して、最初にマッチした要素を返します。これは document.querySelector() と等価です。または、$ 関数がページ内に存在する場合はそれを呼び出します。
$$()
CSS のセレクター文字列を探索して、マッチした DOM ノードの配列を返します。これは document.querySelectorAll() に似ていますが、NodeList ではなく配列を返します。
$0
ページ内で現在調査されている要素です。
$_
コンソールのコマンドラインで最後に実行した式の結果を保持します。例えば "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 での作業 をご覧ください。

copy()
Firefox 38 の新機能。 引数で指定したものをクリップボードにコピーします。引数が文字列である場合は、そのままコピーします。また引数が DOM ノードである場合は、ノードの outerHTML をコピーします。他の値である場合は引数に対して JSON.stringify を呼び出して、その結果をコピーします。
clearHistory()
Firefox 39 の新機能。一般的なコマンドラインと同様に、コンソールのコマンドラインも 過去に入力したコマンドを覚えています。この関数を実行すると、コンソールのコマンドラインの履歴を消去します。

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

変数

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

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

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

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

inspect($("#title"))

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

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

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

pprint($("#title"))

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

ドキュメントのタグと貢献者

 このページの貢献者: yyss, teoli, ethertank, saneyuki_s
 最終更新者: yyss,