Console Utilities API には、一般的なタスクを実行するための便利な関数のコレクションが含まれています。これらのタスクには、DOM 要素の選択と調査、オブジェクトのクエリ、読み取り可能な形式でのデータの表示、プロファイラの起動と停止、DOM イベントと関数呼び出しのモニタリングなどがあります。
console.log()、console.error()、その他の console.* 関数をお探しですか？コンソール API リファレンスをご覧ください。
$_
$_ は、直前に評価された式の値を返します。
次の例では、単純な式（2 + 2）が評価されます。次に、同じ値を含む $_ プロパティが評価されます。
次の例では、評価された式に最初は名前の配列が含まれています。$_.length を評価して配列の長さを調べると、$_ に保存されている値が変わり、最後に評価された式の 4 になります。
$0 ～$4
$0、$1、$2、$3、$4 コマンドは、[Elements] パネル内で検査した最後の 5 つの DOM 要素、または [Profiles] パネルで選択した最後の 5 つの JavaScript ヒープ オブジェクトの履歴参照として機能します。$0 は最近選択した要素または JavaScript オブジェクトを返します。$1 は最近 2 番目に選択した要素を返します。
次の例では、[Elements] パネルで img 要素が選択されています。[Console] ドロワーでは、$0 が評価され、同じ要素が表示されます。
次の画像は、同じページで別の要素が選択されていることを示しています。$0 は、今度は新しく選択された要素を参照し、$1 は前に選択された要素を返します。
$(セレクタ [, 開始ノード])
$(selector) は、指定された CSS セレクタを含む最初の DOM 要素への参照を返します。1 つの引数で呼び出された場合は、document.querySelector() 関数のショートカットです。
次の例は、ドキュメント内の最初の <img> 要素への参照を返します。
返された結果を右クリックして、[Reveal in Elements Panel] を選択すると DOM で検索でき、[Scroll in to View] を選択するとページ上に表示できます。
次の例は、現在選択されている要素への参照を返し、その src プロパティを表示します。
この関数は、要素を検索する「要素」またはノードを指定する 2 番目のパラメータ startNode もサポートしています。このパラメータのデフォルト値は document です。
次の例は、devsite-header-background の子孫である最初の img 要素への参照を返して、その src プロパティを表示します。
$$(selector [, startNode])
次の例では、$$（セレクタ）は、指定された CSS セレクタに一致する要素の配列を返します。このコマンドは Array.from(document.querySelectorAll()) を呼び出すことと同じです。
$$() to create an array of all <img> elements in the current document
and displays the value of each element's src property:let images = $$('img');
for (let each of images) {
console.log(each.src);
}
を使用しています。
選択したノード後に現在のドキュメントに表示される<img> 要素:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$x(path [, startNode])
$x(path) は、指定された XPath 式に一致する DOM 要素の配列を返します。
たとえば、次の例では、ページ上のすべての <p> 要素が返されます。
$x("//p")
次の例では、<a> 要素を含むすべての <p> 要素が返されます。
$x("//p[a]")
他のセレクタ関数と同様に、$x(path) には省略可能な 2 番目のパラメータ startNode があります。これは、要素を検索する要素またはノードを指定します。
clear()
clear() は、履歴のコンソールをクリアします。
clear();
copy(object)
copy(object) は、指定されたオブジェクトの文字列表現をクリップボードにコピーします。
copy($0);
debug(function)
指定した関数が呼び出されると、デバッガーが起動されてその関数内で中断するため、[ソース] パネルでコードをステップ実行してデバッグできます。
debug(getData);
関数での中断を終了するには undebug(fn) を使用し、すべてのブレークポイントを無効にするには UI を使用します。
ブレークポイントの詳細については、ブレークポイントを使用してコードを一時停止するをご覧ください。
dir(object)
dir(object) は、指定されたオブジェクトのすべてのプロパティをオブジェクト スタイルのリストで表示します。このメソッドは、Console API の console.dir() メソッドのショートカットです。
次の例は、コマンドラインで document.body を直接評価した場合と、dir() を使用して同じ要素を表示した場合の違いを示しています。
document.body;
dir(document.body);
詳細については、Console API の console.dir() エントリをご覧ください。
dirxml(object)
dirxml(object) は、[要素] パネルに表示されるように、指定されたオブジェクトの XML 表現を出力します。このメソッドは console.dirxml() メソッドと同じです。
inspect(object/function)
inspect(object/function) は、指定された要素またはオブジェクトを適切なパネルで開いて選択します。DOM 要素の場合は [Elements] パネル、JavaScript ヒープ オブジェクトの場合は [Profiles] パネルが使用されます。
次の例では、[要素] パネルで document.body を開きます。
inspect(document.body);
調べる関数を渡すと、[ソース] パネルにドキュメントが調査用に開きます。
getEventListeners(object)
getEventListeners(object) は、指定されたオブジェクトに登録されているイベント リスナーを返します。戻り値は、登録されたイベントタイプ（click や keydown など）ごとに配列を含むオブジェクトです。各配列のメンバーは、各タイプに登録されたリスナーを記述するオブジェクトです。たとえば、次のコマンドでは、ドキュメント オブジェクトに登録されているすべてのイベント リスナーを一覧表示します。
getEventListeners(document);
指定したオブジェクトに複数のリスナーが登録されている場合は、配列に各リスナーのメンバーが含まれます。次の例では、click イベント用にドキュメント要素に 2 つのイベント リスナーが登録されています。
これらの各オブジェクトをさらに展開して、そのプロパティを調べることができます。
詳細については、オブジェクトのプロパティを検査するをご覧ください。
keys（オブジェクト）
keys(object) は、指定されたオブジェクトに属するプロパティの名前を含む配列を返します。同じプロパティに関連付けられている値を取得するには、values() を使用します。
たとえば、アプリケーションで次のオブジェクトが定義されているとします。
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
player がグローバルな名前空間に定義されていると仮定して（簡潔にするため）、コンソールで keys(player) と values(player) を入力すると、結果は次のようになります。
monitor(function)
指定した関数が呼び出されると、関数名とその関数の呼び出し時に渡された引数を示すメッセージがコンソールに出力されます。
function sum(x, y) {
return x + y;
}
monitor(sum);
モニタリングを停止するには、unmonitor(function) を使用します。
monitorEvents(object [, events])
指定されたイベントのいずれかが指定されたオブジェクトで発生すると、イベント オブジェクトがコンソールに出力されます。監視する 1 つのイベント、イベントの配列、またはイベントの定義済みコレクションにマッピングされた一般的なイベントの「タイプ」のいずれかを指定できます。下記の例をご覧ください。
次のメソッドは、window オブジェクトに対するすべての resize イベントを監視します。
monitorEvents(window, "resize");
次のメソッドは、window オブジェクトに対する "resize" イベントと "scroll" イベントの両方を監視する配列を定義しています。
monitorEvents(window, ["resize", "scroll"])
イベントの定義済みセットにマッピングされた文字列である、利用可能なイベントの「タイプ」のいずれかを指定することもできます。次の表に、利用可能なイベントタイプとそれに関連付けられているイベント マッピングを示します。
| イベントタイプと対応するマッピング済みイベント | |
|---|---|
| マウス | 「mousedown」、「mouseup」、「click」、「dblclick」、「mousemove」、「mouseover」、「mouseout」、「mousewheel」 |
| key | 「keydown」、「keyup」、「keypress」、「textInput」 |
| タッチ操作 | 「touchstart」、「touchmove」、「touchend」、「touchcancel」 |
| コントロール | 「resize」、「scroll」、「zoom」、「focus」、「blur」、「select」、「change」、「submit」、「reset」 |
たとえば、次のメソッドは、[Elements] パネルで現在選択されている入力テキスト項目に対して、"key" イベント タイプの対応するすべてのキーイベントを使用しています。
monitorEvents($0, "key");
テキスト項目に文字を入力した後のサンプル出力を次に示します。
モニタリングを停止するには、unmonitorEvents(object[, events]) を使用します。
profile([name]) と profileEnd([name])
profile() は、オプションの名前を指定して JavaScript CPU プロファイリング セッションを開始します。profileEnd() によりプロファイルが完成し、[パフォーマンス] > [メイン] トラックに結果が表示されます。
プロファイリングを開始するには、次のようにします。
profile("Profile 1")
プロファイリングを停止して、[パフォーマンス] > [メイン] トラックで結果を確認するには:
profileEnd("Profile 1")
[パフォーマンス] > [メイン] トラックの結果:
プロファイルは、ネストすることもできます。次の例は、どのような順番でも動作します。
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
queryObjects(Constructor)
コンソールから queryObjects(Constructor) を呼び出して、指定されたコンストラクタで作成されたオブジェクトの配列を返します。次に例を示します。
queryObjects(Promise)。Promiseのすべてのインスタンスを返します。queryObjects(HTMLElement)。すべての HTML 要素を返します。queryObjects(foo)。ここで、fooはクラス名です。new foo()を介してインスタンス化されたすべてのオブジェクトを返します。
queryObjects() のスコープは、コンソールで現在選択されている実行コンテキストです。
table(data [, columns])
オプションの列見出しを指定してデータ オブジェクトを渡すことで、オブジェクト データを表形式で記録します。これは console.table() のショートカットです。
たとえば、コンソールで表を使用して名前のリストを表示するには、次のようにします。
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
undebug(function)
undebug(function) は、指定された関数のデバッグを停止して、関数が呼び出されたときにデバッガーが起動されないようにします。これは debug(fn) と組み合わせて使用されます。
undebug(getData);
unmonitor(function)
unmonitor(function) は、指定された関数のモニタリングを停止します。これは monitor(fn) と組み合わせて使用されます。
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events]) は、指定されたオブジェクトとイベントの監視を停止します。たとえば、次のメソッドは、window オブジェクトに対するすべてのイベント監視を停止します。
unmonitorEvents(window);
オブジェクトに対する特定のイベントの監視を停止することもできます。たとえば、次のコードでは、現在選択されている要素に対するすべての mouse イベントの監視を開始し、「mousemove」イベントの監視を停止します（コンソール出力のノイズを減らすため）。
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
values(object)
values(object) は、指定されたオブジェクトに属しているすべてのプロパティの値を含む配列を返します。
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);
