Console Utilities API リファレンス

Sofia Emelianova
Sofia Emelianova

Console Utilities API には、一般的なタスクの実行に役立つ各種の関数が DOM 要素の選択と検査、オブジェクトのクエリ、読み取り可能な形式でのデータの表示、停止と プロファイラの起動、DOM イベントと関数呼び出しの監視などを行います。

console.log()console.error()、その他の console.* 関数をお探しですか?詳しくは、 コンソール API リファレンス

$_

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

次の例では、単純な式(2 + 2)が評価されます。$_ プロパティは次のようになります。 が評価され、同じ値が含まれています。

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

次の例では、評価された式に最初に名前の配列が含まれています。評価中 $_.length: 配列の長さを確認します。$_ に格納されている値が最新の値に変更されます。 評価された式、4:

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

$0 ~$4

$0$1$2$3$4 コマンドは、過去 5 つの DOM への履歴参照として機能 [Elements] パネルで調査された要素、または [Profiles] パネルを使用します。$0 は、最近選択された要素または JavaScript オブジェクト($1)を返します。 は 2 番目に最後に選択されたものを返します。以降も同様です。

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

例: $0。

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

例: $1。

$(selector [, startNode])

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

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

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

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

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

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

この関数では、2 番目のパラメータ startNode で「element」またはノードを 指定します。このパラメータのデフォルト値は 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=&lt;img&gt;要素 次の候補は、現在のドキュメントで選択したノードの後に表示されます。

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

デバッグ(関数)

指定した関数が呼び出されると、デバッガが呼び出され、関数内で コードをステップ実行してデバッグできる [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() による要素の検査。

検査する関数を渡すと、その関数によってドキュメントが [ソース] パネルに表示されます 調べることができます。

getEventListeners(object)

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

getEventListeners(document);

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

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

複数のリスナー。

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

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

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

keys(オブジェクト)

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

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

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

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

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

モニター(関数)

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

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

monitoring() メソッドの例。

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

monitorEvents(object [, events])

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

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

monitorEvents(window, "resize");

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

以下の例では、「resize」と「resize」の両方を監視すると「scroll」次のことに注意してください。

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

また、利用可能なイベント「タイプ」の 1 つも指定できます。「タイプ」とは、定義済みの一連のイベントにマッピングされた文字列です。 できます。次の表に、利用可能なイベントの種類と、それに関連するイベントのマッピングを示します。

イベントタイプと対応するマッピング済みイベント
マウス「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」がイベントタイプ: 入力テキストに対応するすべてのキーイベント フィールドが [Elements] パネルで選択されていることを示します。

monitorEvents($0, "key");

以下は、テキスト フィールドに文字を入力した後の出力例です。

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

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

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

profile() は、オプションの名前を指定して JavaScript CPU プロファイリング セッションを開始します。profileEnd() プロファイルが完成し、[Performance] ペインに結果が表示されます。メイン トラック。

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

profile("Profile 1")

プロファイリングを停止して [Performance] ペインで結果を確認する >メイン トラック:

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() のスコープは、コンソールで現在選択されている実行コンテキストです。

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

オプションの列見出しを持つデータ オブジェクトを渡して、テーブル フォーマットでオブジェクト データを記録します。 これは 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);

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

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

values(オブジェクト)

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

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

values(player);

値の結果(プレーヤー)。