Console Utilities API リファレンス

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(パス [, 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（オブジェクト/関数）

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

次の例では、[Elements] パネルで 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);