Console Utilities API リファレンス

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Console Utilities API には、一般的なタスクを実行するための便利な関数が用意されています。DOM 要素の選択と検査、オブジェクトのクエリ、読みやすい形式でのデータの表示、プロファイラの停止と開始、DOM イベントと関数呼び出しのモニタリングなどです。

console.log()、console.error()、その他の console.* 関数をお探しですか？Console API リファレンスをご覧ください。

$_

$_ は、最後に評価された式の値を返します。

次の例では、簡単な式（2 + 2）が評価されます。次に、同じ値を含む $_ プロパティが評価されます。

$_ は、最後に評価された式です。

次の例では、評価された式に名前の配列が最初に含まれています。 $_.length を評価して配列の長さを調べると、$_ に格納されている値が最新の 評価式である 4 に変わります。

$_ は、新しいコマンドが評価されると変更されます。

$0 - $4

$0、$1、$2、$3、$4 の各コマンドは、[Elements] パネルで検査された最後の 5 つの DOM 要素（::before や ::after などの疑似要素を含む）または [Profiles] パネルで選択された最後の 5 つの JavaScript ヒープ オブジェクトへの履歴参照として機能します。$0 は最後に選択された要素または JavaScript オブジェクトを返し、$1 は 2 番目に選択された要素または JavaScript オブジェクトを返します。

次の例では、[Elements] パネルで img 要素が選択されています。[Console] ドロワーで $0 が評価され、同じ要素が表示されます。

$0 の例。

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

$1 の例。

$(selector [, startNode])

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

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

$('img') の例。

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

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

$('img').src の例。

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

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

$('img', 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(path [, startNode])



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



たとえば、次のコマンドはページ上のすべての <p> 要素を返します。


$x("//p")



XPath セレクタの使用例。



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


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



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



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



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



clear()



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


clear();



copy(object)



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


copy($0);



debug(function)



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


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) は、[Elements] パネルに表示されるように、指定されたオブジェクトの XML 表現を出力します。
このメソッドは、console.dirxml() メソッドと同じです。



inspect(object/function)



inspect(object/function) は、適切なパネルで指定された要素またはオブジェクトを開いて選択します。DOM 要素の場合は [Elements] パネル、JavaScript ヒープ オブジェクトの場合は [Profiles] パネルです。



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


inspect(document.body);



inspect() を使用して要素を検査する。



検査する関数を渡すと、[Sources] パネルでドキュメントが開き、検査できるようになります。



getEventListeners(object)



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


getEventListeners(document);



getEventListeners() を使用した出力。



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



複数のリスナー。



これらのオブジェクトをさらに展開して、プロパティを確認できます。



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



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



keys(object)



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



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


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



（簡略化のため）player がグローバル名前空間で定義されているとすると、keys(player) と
values(player) を [Console] に入力すると、次のようになります。



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



monitor(function)



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


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



monitor() メソッドの例。



モニタリングを停止するには、unmonitor(function) を使用します。



monitorEvents(object [, events])



指定されたオブジェクトで指定されたイベントのいずれかが発生すると、Event オブジェクトがコンソールに記録されます。モニタリングするイベントを 1 つ指定することも、イベントの配列を指定することも、事前定義されたイベントのコレクションにマッピングされた汎用イベント「タイプ」のいずれかを指定することもできます。下記の例をご覧ください。



次のコマンドは、window オブジェクトのすべてのリサイズ イベントをモニタリングします。


monitorEvents(window, "resize");



ウィンドウのサイズ変更イベントをモニタリングします。



次のコマンドは、window オブジェクトの「resize」イベントと「scroll」イベントの両方をモニタリングする配列を定義します。


monitorEvents(window, ["resize", "scroll"])



使用可能なイベント「タイプ」のいずれかを指定することもできます。これは、事前定義されたイベントのセットにマッピングされる文字列です。次の表に、使用可能なイベントタイプと、関連するイベント マッピングを示します。



イベントタイプと対応するマッピングされたイベント
マウス"mousedown"、"mouseup"、"click"、"dblclick"、"mousemove"、"mouseover"、"mouseout"、"mousewheel"
キー"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()
はプロファイルを完了し、[Performance] パネルを自動的に開き、[Main] トラックに結果を表示します。





プロファイリングを開始するには:


profile("Profile 1")



プロファイリングを停止して、[Performance] > [Main] トラックに結果を表示するには:


profileEnd("Profile 1")



[Performance] > [Main] トラックの結果:



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



記録されたテーブルをフォーマットされた Markdown テーブルまたは CSV データとしてクリップボードにコピーするには、[Console] でテーブルを右クリックし、コンテキスト メニューから対応するコピー オプションを選択します。



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



オブジェクトの特定のイベントのモニタリングを選択的に停止することもできます。たとえば、次のコードは、現在選択されている要素のすべてのマウスイベントのモニタリングを開始し、次に「mousemove」イベントのモニタリングを停止します（コンソール出力のノイズを減らすためなど）。


monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");



values(object)



values(object) は、指定されたオブジェクトに属するすべてのプロパティの値を含む配列を返します。


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

values(player);



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