Console Utilities API リファレンス

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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 の例。

下の画像は、同じページ内で異なる要素が選択された場合を示しています。これで、$0 は新しく選択された要素を参照するようになり、$1 は以前に選択された要素を返します。

$1 の例。

$(セレクタ [, 開始ノード])

$(selector) は、指定された CSS セレクタを含む最初の DOM 要素への参照を返します。この関数は、1 つの引数を指定して呼び出すと、document.querySelector() 関数のショートカットになります。

次の例は、ドキュメント内の最初の <img> 要素への参照を返します。

$(&#39;img&#39;) の例。

返された結果を右クリックして、[Reveal in Elements Panel] を選択すると DOM で検索でき、[Scroll in to View] を選択するとページ上に表示できます。

次の例では、現在選択されている要素への参照を返し、その src プロパティを表示します。

$(&#39;img&#39;).src の例。

この関数では、要素を検索する「要素」またはノードを指定する 2 番目のパラメータ startNode もサポートされています。このパラメータのデフォルト値は document です。

次の例は、devsite-header-background の子孫である最初の img 要素への参照を返して、その src プロパティを表示します。

$(&#39;img&#39;, div).src の例。

$$(selector [, startNode])

$$（selector）は、指定された 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);
}
 を使用しています。
現在のドキュメントで選択したノードの後に表示される <!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> を使用して、すべての <code translate=<img> 要素:


let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



$() を使用して、ドキュメント内の select div 要素の後に表示されるすべての画像を選択し、そのソースを表示する例。



$x(パス [, startNode])



$x(path) は、指定された XPath 式に一致する DOM 要素の配列を返します。



たとえば、次の例では、ページ上のすべての <p> 要素が返されます。


$x("//p")



XPath セレクタの使用例。



次の例では、<a> 要素を含むすべての <p> 要素が返されます。


$x("//p[a]")



より複雑な XPath セレクタの使用例



他のセレクタ関数と同様に、$x(path) には省略可能な 2 番目のパラメータ startNode があります。これは、要素を検索する要素またはノードを指定します。



startNode で XPath セレクタを使用する例



clear()



clear() は、履歴のコンソールをクリアします。


clear();



copy(object)



copy(object) は、指定されたオブジェクトの文字列表現をクリップボードにコピーします。


copy($0);



debug(function)



指定した関数が呼び出されると、デバッガーが起動されてその関数内で中断するため、[ソース] パネルでコードをステップ実行してデバッグできます。


debug(getData);



debug() による関数内での中断。



undebug(fn) を使用して関数での中断を停止するか、UI を使用してすべてのブレークポイントを無効にします。



ブレークポイントの詳細については、ブレークポイントを使用してコードを一時停止するをご覧ください。



dir(object)



dir(object) は、指定されたオブジェクトのすべてのプロパティをオブジェクト スタイルのリストで表示します。このメソッドは、Console API の console.dir() メソッドのショートカットです。



次の例は、コマンドラインで document.body を直接評価する場合と、dir() を使用して同じ要素を表示する場合の違いを示しています。


document.body;
dir(document.body);



dir() 関数がある場合とない場合の document.body のロギング。



詳細については、Console API の console.dir() エントリをご覧ください。



dirxml(object)



dirxml(object) は、[要素] パネルに表示されるように、指定されたオブジェクトの XML 表現を出力します。このメソッドは、console.dirxml() メソッドと同等です。



inspect（オブジェクト/関数）



inspect(object/function) は、該当するパネル（DOM 要素の場合は [Elements] パネル、JavaScript ヒープ オブジェクトの場合は [Profiles] パネル）を開き、指定された要素またはオブジェクトを選択します。



次の例では、[Elements] パネルで document.body を開きます。


inspect(document.body);



inspect() を使用した要素の調査。



調べる関数を渡すと、[ソース] パネルにドキュメントが調査用に開きます。



getEventListeners(object)



getEventListeners(object) は、指定されたオブジェクトに登録されているイベント リスナーを返します。戻り値は、登録されたイベントタイプ（click や keydown など）ごとに配列を含むオブジェクトです。各配列のメンバーは、各タイプに登録されたリスナーを記述するオブジェクトです。たとえば、次のコマンドでは、ドキュメント オブジェクトに登録されているすべてのイベント リスナーを一覧表示します。


getEventListeners(document);



getEventListeners() を使用した場合の出力。



指定したオブジェクトに複数のリスナーが登録されている場合は、配列に各リスナーのメンバーが含まれます。次の例では、click イベント用にドキュメント要素に 2 つのイベント リスナーが登録されています。



複数のリスナー。



これらの各オブジェクトをさらに展開して、そのプロパティを調べることができます。



リスナー オブジェクトの展開されたビュー。



詳細については、オブジェクトのプロパティを検査するをご覧ください。



keys（オブジェクト）



keys(object) は、指定されたオブジェクトに属するプロパティの名前を含む配列を返します。同じプロパティに関連付けられている値を取得するには、values() を使用します。



たとえば、アプリケーションで次のオブジェクトが定義されているとします。


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};



わかりやすくするために、player がグローバル名前空間で定義されていると仮定します。コンソールで keys(player) と values(player) を入力すると、次のようになります。



keys() メソッドと values() メソッドの例。



monitor(function)



指定された関数が呼び出されると、関数名と呼び出されたときに渡された引数を示すメッセージがコンソールに記録されます。


function sum(x, y) {
  return x + y;
}
monitor(sum);



monitor() メソッドの例。



unmonitor(function) を使用してモニタリングを停止します。



monitorEvents(object [, events])



指定したイベントのいずれかが指定したオブジェクトで発生すると、そのイベント オブジェクトがコンソールに記録されます。監視する 1 つのイベント、イベントの配列、またはイベントの定義済みコレクションにマッピングされた一般的なイベントの「タイプ」のいずれかを指定できます。下記の例をご覧ください。



次のメソッドは、window オブジェクトに対するすべての resize イベントを監視します。


monitorEvents(window, "resize");



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")



[パフォーマンス] > [メイン] トラックでの結果は次のようになります。



パフォーマンスのメイン トラックのプロファイル 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);



table() メソッドの例。



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);



値（プレーヤー）の結果。