コンソールツールユーティリティの関数とセレクター

[アーティクル]
12/08/2023

Console Utilities API には、次のような一般的なタスクを実行するための便利な変数と関数のコレクションが含まれています。

DOM 要素の選択と検査。
読み取り可能な形式でデータを表示する。
プロファイラーの停止と起動。
DOM イベントの監視。

これらの変数と関数は、DevTools コンソールに直接入力することによってのみ機能します。変数を使用してスクリプトから関数を呼び出すことはできません。

概要

変数または関数	説明
最近評価された式: $_	最後に評価された式の値を返します。
最近選択した要素または JavaScript オブジェクト: $0-$4	最近選択した要素または JavaScript オブジェクトを返します。
クエリセレクター: $(selector)	クエリセレクター。は、指定された CSS セレクターを持つ最初の DOM 要素への参照を返します (例: `document.querySelector()`)。
クエリセレクターすべて: $$(selector, [startNode])	クエリセレクターすべて。は、指定された CSS セレクターに一致する要素の配列 (など `document.querySelectorAll()`) を返します。
XPath: $x(path, [startNode])	指定した XPath 式に一致する DOM 要素の配列を返します。
clear()	履歴のコンソールをクリアします。
copy(object)	指定したオブジェクトの文字列表現をクリップボードにコピーします。
debug(function)	指定した関数が呼び出されると、デバッガーが呼び出され、[ソース] パネルの関数内で中断されます。
dir(object)	など、指定したオブジェクトのすべてのプロパティのオブジェクトスタイルの一覧を表示します `console.dir()`。
dirxml(object)	Elements ツールに表示される、指定したオブジェクトの XML 表現を印刷します (例: `console.dirxml()`)。
inspect(object/function)	Elements ツールで指定した DOM 要素を開いて選択するか、メモリツールで指定した JavaScript ヒープオブジェクトを選択します。
getEventListeners(object)	指定したオブジェクトに登録されているイベントリスナーを返します。
keys(object)	指定したオブジェクトに属するプロパティの名前を含む配列を返します。
monitor(function)	関数名を示すメッセージと、要求の一部として関数に渡される引数を示すメッセージをコンソールにログに記録します。
monitorEvents(object[, events])	指定したオブジェクトで指定されたイベントのいずれかが発生すると、イベントオブジェクトがコンソールに記録されます。
profile([name])	省略可能な名前で JavaScript CPU プロファイルセッションを開始します。
profileEnd([name])	JavaScript CPU プロファイリングセッションを完了し、結果をパフォーマンスツールに表示します。
queryObjects(コンストラクター)	指定したコンストラクターによって作成されたオブジェクトの配列を返します。
table(data[, columns])	指定したデータオブジェクトの列見出しを含むテーブルとして書式設定されたオブジェクトデータをログに記録します。
undebug(function)	関数が要求されたときにデバッガーが呼び出されないように、指定した関数のデバッグを停止します。
unmonitor(function)	指定した関数の監視を停止します。
unmonitorEvents(object[, events])	指定したオブジェクトとイベントのイベントの監視を停止します。
values(object)	指定したオブジェクトに属するすべてのプロパティの値を含む配列を返します。

最近評価された式: $_

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

構文:

$_

例 1

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、式 2+2を入力し、Enter キーを押します。

式が評価され、結果が表示されます。変数 $_ は、式の結果にも設定されます。
と入力 $_し、 Enter キーを押します。

例 2

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
次のコードを コンソールに貼り付け、 Enter キーを押します。
```
["john", "paul", "george", "ringo"]
```
評価された式は、名前の配列です。
コンソールに次のコードを入力し、Enter キーを押します。
```
$_.length
```
以前に評価された4式 $_.length (名前の配列) を参照するため$_、式は評価され、コンソールに表示されます。 $_.length は、名前の配列の長さです。
コンソールに次のコードを入力し、Enter キーを押します。
```
$_
```
$_ は常に、以前に評価された式を参照します。これは現在、数値 4 です。

最近選択した要素または JavaScript オブジェクト: $0-$4

$0、 $1、 $2、 $3およびは、 $4 最近選択した要素または JavaScript オブジェクトを返します。

$0 は、最後に選択した要素または JavaScript オブジェクトを返し、 $1 最後に選択した 2 番目の要素を返します。、$1、$2$3、および $4 変数は$0、Elements ツール内で検査された最後の 5 つの DOM 要素、またはメモリ ツールで選択された最後の 5 つの JavaScript ヒープオブジェクトへの履歴参照として機能します。

構文

$0

例

DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
[要素] ツールで、要素 (要素など) を<input>選択します。
DevTools の下部 にある クイックビュー パネルでコンソールツールを開きます。
コンソール ツールで「」と入力$0し、Enter キーを押します。

変数は $0 、選択した <input> 要素を返します。
要素ツールで別の要素 (要素など) を<div>選択します。
コンソール ツールで、「」と入力$0し、Enter キーを押します。

$0 は、新しく選択された要素を指します。これは要素です <div> 。
「$1」と入力して、Enter キーを押します。

$1 は、前に選択した要素を <input> 参照します。これは要素です。

クエリセレクター: $(selector)

$(selector) は、指定した CSS セレクターと一致する最初の DOM 要素への参照を返します selector。

この関数は document.querySelector() 関数に似ています。

を使用する jQuery などのライブラリを使用 $している場合、機能は上書きされ $ 、そのライブラリからの実装に対応します。

構文

$(selector, [parentElement])

例 1

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力します$('input')。 CSS セレクターに一致する最初の input 要素が表示されます。
返された結果を右クリックし、[ 要素パネルで表示 ] を選択して DOM で検索するか、 スクロールしてビューに 移動してページに表示します。

例 2

関数は $() 、 parentElement検索する親要素を指定する 2 番目のパラメーターを受け取ります。パラメーターの既定値はです document。これは、Web ページ全体が既定で検索されることを意味します。親要素を指定することで、Web ページの特定の部分内の要素を検索できます。

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力します。$('input', $('ul'))

最初の要素内で見つかった CSS セレクターに input 一致する最初 ul の要素は、retruned です。

クエリセレクターすべて: $$(selector, [startNode])

$$() は、指定された CSS セレクターに一致する要素の一覧を返します (例: document.querySelectorAll())。

この関数は document.querySelectorAll() に似ていますが、ではなく、要素をNodeList返しますarray。

構文

$$(selector, [parentElement])

例 1

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力します$$('button')。 <button> Web ページ内のすべての要素が表示されます。

例 2

この $$() 関数では、 parentElement検索する親要素を指定する 2 番目のパラメーターもサポートされています。パラメーターの既定値はです document。これは、Web ページ全体が既定で検索されることを意味します。親要素を指定することで、Web ページの特定の部分内の要素を検索できます。

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力します$$('button', $('li.task'))。最初<li class="task">の<button>要素の子孫であるすべての要素が表示されます。

XPath: $x(path, [startNode])

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

構文

$x(path, [parentElement])

例 1

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力します$x("//li")。 <li> Web ページ内のすべての要素が表示されます。

例 2

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力します$x("//li[button]")。要素を <li> 含むすべての <button> 要素が表示されます。

他のセレクターコマンドと同様に、 $x(path) 要素を検索する要素またはノードを指定する省略可能な 2 番目のパラメーター parentElementがあります。

clear()

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

構文

clear()

例

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで履歴を作成するには、複数の JavaScript 式を入力します。例:
```
for (let i = 0; i < 10; i++) {
    console.log(i);
}
```
履歴を消去するには、コンソール ツールで「」と入力clear()し、Enter キーを押します。

copy(object)

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

構文

copy(object)

例

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで次のコードを入力し、Enter キーを押します。
```
copy($$('*').map(element => element.tagName));
```
コードスニペットは、関数を使用して Web ページ内のすべての要素を $$(selector) 選択し、各要素のプロパティを tagName 配列にマップします。次に、関数を使用して配列がクリップボードに copy() コピーされます。
クリップボードの内容をテキストエディターに貼り付けます。クリップボードの内容は、次のように、Web ページ内のすべての HTML タグの一覧です。
```
["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
```

debug(function)

debug(function) は、その関数 function が呼び出されたときに、 Sources ツールで指定された関数内で一時停止します。

デバッガーが一時停止したら、コードをステップ実行してデバッグできます。

構文

debug(function)

例

新しいタブまたはウィンドウを開き、デバッグする JavaScript 関数を含むページに移動します。たとえば、 TODO アプリのデモページに移動します。
Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力しますdebug(updateList)。
レンダリングされた Web ページで、[タスクテキストの追加] フィールドに「test」と入力し、Enter キーを押して、新しい TODO 項目をリストに追加します。

デバッガーは、ソース ツールのupdateList()関数内で一時停止します。

を使用して undebug(function) 関数の中断を停止するか、UI を使用してすべてのブレークポイントをオフにします。

ブレークポイントの詳細については、「ブレークポイントを使用してコードを一時停止する」を参照してください。

dir(object)

dir(object) は、指定したオブジェクトのすべてのプロパティ (など console.dir()) のオブジェクトスタイルの一覧を表示します。

この関数は console.dir()のエイリアスです。

構文

dir(object)

例

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力document.headし、Enter キーを押します。

要素の <head> HTML 表現が表示されます。
Enter dir(document.head) キーを押し、 Enter キーを押します。

要素のすべてのプロパティ <head> のオブジェクトスタイルの一覧が表示されます。

詳細については、コンソール API の console.dir() を参照してください。

dirxml(object)

dirxml(object)は、などのconsole.dirxml()要素ツールに表示されるように、指定したオブジェクトの XML 表現を出力します。

この関数は console.dirxml()と同じです。

構文

dirxml(object)

inspect(object/function)

inspect(element/function) は、 Elements ツールで指定された DOM 要素を開いて選択するか、 ソース ツールで指定した JavaScript 関数を選択します。

DOM 要素の場合、この関数は Elements ツールで 指定した DOM 要素を開いて選択します。
JavaScript 関数の場合、この関数は ソース ツールで指定された JavaScript 関数を開きます。

構文

inspect(element/function)

例

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力inspect(document.body)し、Enter キーを押します。

[要素] ツールが開き、<body>要素が選択されます。

検査する関数を渡すと、関数によって ソース ツールで Web ページが開き、検査が行われます。

getEventListeners(object)

getEventListeners(object) は、指定したオブジェクトに登録されているイベントリスナーを返します。

戻り値は、登録されている各イベント型 (や keydownなどclick) の配列を含むオブジェクトです。各配列内の項目は、型ごとに登録されたリスナーを記述するオブジェクトです。

構文

getEventListeners(object)

例

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、「」と入力getEventListeners($('form'))し、Enter キーを押します。

最初 <form> の要素に登録されているイベントリスナーが表示されます。

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

'click' イベントの 'document' 要素に登録されている複数のイベントリスナー

keys(object)

keys(object) は、指定したオブジェクトに属するプロパティの名前を含む配列を返します。

同じプロパティの関連する値を取得するには、以下の values(object)を参照してください。

構文

keys(object)

例

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、次のコードを入力し、Enter キーを押します。
```
var player1 = {"name": "Ted", "level": 42}
```
上記のコードスニペットは、という名前 player1のグローバル名前空間にオブジェクトを定義します。このオブジェクトには 2 つのプロパティが含まれています。
オブジェクトに属するプロパティの名前をplayer1取得するには、コンソール ツールで「」と入力keys(player1)し、Enter キーを押します。
オブジェクトに属するプロパティの値をplayer1取得するには、コンソール ツールで「」と入力values(player1)し、Enter キーを押します。

monitor(function)

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

構文

monitor(function)

例

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、次のコードを入力し、Enter キーを押します。
```
function sum(x, y) {
  return x + y;
}
```
上記のコードスニペットでは、という名前 sumの関数が定義されています。これは、2 つの引数を受け入れます。
関数の監視をsum開始するには、コンソール ツールで「」と入力monitor(sum)し、Enter キーを押します。
関数を呼び出すには、Enter キーを押 sum(1, 2) して Enter キーを押 します。関数が呼び出され、引数が関数に sum 渡されたことを示すメッセージが表示されます。

監視を終了するには、を使用します unmonitor(function)。

monitorEvents(object[, events])

monitorEvents(object[, events]) 指定したオブジェクトで指定したイベントが発生するたびに、イベントオブジェクトをコンソールにログに記録します。

監視する 1 つのイベント、イベントの配列、またはイベントの定義済みのコレクションにマップされるジェネリックイベントの種類のいずれかを指定できます。

構文

monitorEvents(object[, events])

例 1

1 つのイベントを監視するには:

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、次のコードを入力し、Enter キーを押します。
```
monitorEvents(window, "resize");
```
前のコードスニペットは、ウィンドウオブジェクトのすべてのサイズ変更イベントを監視します。
たとえば、DevTools を大きくしたり小さくしたりして、ウィンドウのサイズを変更します。サイズ変更イベントは コンソール ツールに表示されます。

例 2

複数のイベントを監視するには:

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、次のコードを入力し、Enter キーを押します。
```
monitorEvents(window, ["resize", "scroll"]);
```
前のコードスニペットでは、ウィンドウオブジェクトのイベントとscrollイベントの両方resizeを監視するイベント名の配列を定義しています。
たとえば、ウィンドウのサイズを短くして、レンダリングされた Web ページでスクロールします。 コンソール ツールにイベントのサイズ変更とスクロールが表示されます。

例 3

定義済みのイベントセットのいずれかを使用して、イベントのコレクションを指定することもできます。次の表は、使用可能なイベントの種類と関連するイベントマッピングを示しています。

イベントの種類	対応するマップされたイベント
`mouse`	"click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "mousewheel"
`key`	"keydown"、"keypress"、"keyup"、"textInput"
`touch`	"touchcancel"、"touchend"、"touchmove"、"touchstart"
`control`	"blur", "change", "focus", "reset", "resize", "scroll", "select", "submit", "zoom"

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソール ツールで、次のコードを入力し、Enter キーを押します。
```
monitorEvents(window, "key");
```
前のコードスニペットは、ウィンドウオブジェクト上のすべてのキーボードイベントを監視します。
レンダリングされた Web ページで、任意のキーを押します。キーボードイベントは コンソール ツールに表示されます。

profile([name])

profile([name]) は、省略可能な名前で JavaScript CPU プロファイルセッションを開始します。

プロファイルを完了し、 パフォーマンス ツールに結果を表示するには、 profileEnd([name])を呼び出します。

構文

profile([name])

例

プロファイルするページを新しいタブまたはウィンドウで開きます。たとえば、低調なアニメーションのデモページに移動します。
Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
プロファイリングを開始するには、 コンソール ツールで「」と入力 profile("My profile)し、 Enter キーを押します。
プロファイリングを停止するには、しばらくしてから、「」と入力 profileEnd("My profile")し、 Enter キーを押します。

プロファイルの結果は 、パフォーマンス ツールに表示されます。

複数のプロファイルを同時に作成でき、各プロファイルを作成順序で終了する必要はありません。たとえば、次のコードでは、2 つのプロファイルを作成し、逆の順序で終了します。

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

profileEnd([name])

profileEnd([name]) は、JavaScript CPU プロファイリングセッションを完了し、 結果をパフォーマンス ツールに表示します。

この関数を呼び出すには、 profile([name]) 関数を実行している必要があります。

構文

profileEnd([name])

詳細については、上記の profile([name])を参照してください。

queryObjects(コンストラクター)

queryObjects(constructor) は、指定したコンストラクターによって作成されたオブジェクトの配列を返します。

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

構文

queryObjects(constructor)

例

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
HTML 要素のすべてのインスタンスを返すには、コンソール ツールで「」と入力queryObjects(HTMLElement)し、Enter キーを押します。

その他の例:

Web ページでオブジェクトを使用している場合は、 Promise を使用PromisequeryObjects(Promise)してオブジェクトのすべてのインスタンスを返します。
Web ページで JavaScript クラスを使用している場合は、をClassName使用queryObjects(ClassName)してクラスのすべてのインスタンスを返します。

table(data[, columns])

table(data[, columns]) は、指定されたデータオブジェクトの列見出しを含むテーブルとして書式設定されたオブジェクトデータをログに記録します。

この関数は console.table()のエイリアスです。

構文

table(data[, columns])

例

ユーザーの名前の一覧をテーブルとして表示するには、コンソールで次の手順を 実行します。

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。 コンソール ツールが DevTools で開き、Web ページの横に表示されます。
コンソールで次のコードを入力し、Enter キーを押します。
```
var names = {
  0: {
    firstName: "John",
    lastName: "Smith"
  },
  1:  {
    firstName: "Jane",
    lastName: "Doe"
  }
};
```
上記のコードスニペットは、という名前 namesのグローバル名前空間にオブジェクトを定義します。このオブジェクトには 2 つのプロパティが含まれています。
オブジェクトをnamesテーブルとして表示するには、コンソールで「」と入力table(names)し、Enter キーを押します。

undebug(function)

undebug(function) は、指定した関数のデバッグを停止します。そのため、関数の実行時にデバッガーは関数内で一時停止されなくなります。

詳細については、上記の debug(function)を参照してください。

構文

undebug(function)

unmonitor(function)

unmonitor(function) は、指定された関数の監視を停止します。

詳細については、上記の monitor(function)を参照してください。

構文

unmonitor(function)

unmonitorEvents(object[, events])

unmonitorEvents(object[, events]) は、指定されたオブジェクトとイベントのイベントの監視を停止します。

詳細については、上記の monitorEvents(object[, events])を参照してください。

構文

unmonitorEvents(object[, events])

values(object)

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

同じプロパティの関連付けられたキーを取得するには、上記の keys(object)を参照してください。

構文

values(object)

例

上記の keys(object)の例を参照してください。

コンソール ツールユーティリティの関数とセレクター

概要