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 の各コマンドは、[要素] パネルで検査された最後の 5 つの DOM 要素、または [プロファイル] パネルで選択された最後の 5 つの JavaScript ヒープ オブジェクトの履歴参照として機能します。$0 は最後に選択した要素または JavaScript オブジェクトを返し、$1 は 2 番目に最後に選択した要素または JavaScript オブジェクトを返します。

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

$0 の例。

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

$1 の例。

$(selector [, startNode])

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

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

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

返された結果を右クリックして [要素パネルで表示] を選択すると、DOM でその結果を見つけることができます。また、[ビューにスクロール] を選択すると、ページにその結果が表示されます。

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

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

この関数は、要素を検索する「要素」または Node を指定する 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(path [, 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(object/function)



inspect(object/function) をクリックすると、適切なパネル（DOM 要素の場合は [要素] パネル、JavaScript ヒープ オブジェクトの場合は [プロファイル] パネル）で指定された要素またはオブジェクトが開いて選択されます。



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


inspect(document.body);



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



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



getEventListeners(object)



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


getEventListeners(document);



getEventListeners() を使用した出力。



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



複数のリスナー。



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



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



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



keys（オブジェクト）



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



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


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



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



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



monitor(function)



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


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



monitor() メソッドの例。



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



monitorEvents(object [, events])



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



次の例では、ウィンドウ オブジェクトのすべてのサイズ変更イベントをモニタリングします。


monitorEvents(window, "resize");



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



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


monitorEvents(window, ["resize", &quot;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」



たとえば、次の例では、[要素] パネルで現在選択されている入力テキスト フィールドのすべての対応するキーイベントで「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")



[パフォーマンス] > [メイン] トラックの結果:



パフォーマンスのメイン トラックのプロファイル 1。



プロファイルはネストすることもできます。たとえば、次の順序で実行できます。


profile('A');
profile('B');
profileEnd('A&#39;);
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);



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


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



values(object)



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


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

values(player);



values(player) の結果。