Console Utilities API リファレンス

Kayce Basques 氏
Kayce Basques
ソフィア・エメリアノバ
Sofia Emelianova

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

この関数は 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);
}
 を使用しています。

<span class=l10n-placeholder3() : 選択したノードの後の現在のドキュメントに表示されるすべての <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(関数)

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

inspect(object/function)

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

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

inspect(document.body);

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

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

getEventListeners(object)

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

getEventListeners(document);

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

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

複数のリスナー。

各オブジェクトをさらに展開すると、プロパティを確認できます。

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

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

キー(オブジェクト)

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

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

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

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

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

monitor(function)

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

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

monitoring() メソッドの例。

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

monitorEvents(object [, events])

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

以下では、window オブジェクトのすべてのサイズ変更イベントを監視しています。

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」

次の例では、[要素] パネルで現在選択されている入力テキスト フィールドに対応するすべてのキーイベントに "key" イベントタイプを使用しています。

monitorEvents($0, "key");

テキスト フィールドに文字を入力した後の出力例を次に示します。

キーイベントのモニタリング。

unmonitorEvents(object[, events]) を使用してモニタリングを停止します。

profile([name]) と profileEnd([name])

profile() は、オプションの名前で JavaScript CPU プロファイリング セッションを開始します。profileEnd() はプロファイルを作成し、[Performance] > [Main] トラックに結果を表示します。

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

profile("Profile 1")

プロファイリングを停止し、[パフォーマンス] > [メイン] トラックで結果を確認するには:

profileEnd("Profile 1")

[Performance] > [メイン] トラックに移動します。

メイントラック." width="800" height="606">

プロファイルはネストすることもできます。たとえば、これは任意の順序で機能します。

profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

queryObjects(Constructor)

コンソールから queryObjects(Constructor) を呼び出すと、指定したコンストラクタで作成されたオブジェクトの配列が返されます。例:

  • queryObjects(Promise)Promise のすべてのインスタンスを返します。
  • queryObjects(HTMLElement)。すべての HTML 要素を返します。
  • queryObjects(foo)。ここで、foo はクラス名です。new foo() でインスタンス化されたすべてのオブジェクトを返します。

queryObjects() のスコープは、コンソールで現在選択されている実行コンテキストです。

テーブル(データ [, 列])

テーブル形式のログ オブジェクト データを記録するには、オプションの列見出しを指定してデータ オブジェクトを渡します。これは console.table() のショートカットです。

たとえば、コンソールでテーブルを使用して名前のリストを表示するには、次のようにします。

let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);

table() メソッドの例。

undebug(function)

undebug(function) は、指定された関数のデバッグを停止し、関数が呼び出されたときにデバッガは呼び出されないようにします。debug(fn) と組み合わせて使用します。

undebug(getData);

unmonitor(関数)

unmonitor(function) は、指定された関数のモニタリングを停止します。これは monitor(fn) と組み合わせて使用します。

unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) は、指定されたオブジェクトとイベントのイベントのモニタリングを停止します。たとえば次のコマンドは、window オブジェクトに対するすべてのイベント モニタリングを停止します。

unmonitorEvents(window);

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

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

values(オブジェクト)

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

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

values(player);

値の結果(player)。