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

[アーティクル]
11/07/2024

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)	`console.dirxml()`など、Elements ツールに表示されるように、指定したオブジェクトの XML 表現を出力します。
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
```
$_は、以前に評価された式 (名前の配列) を参照しているため、式$_.lengthが評価され、4がコンソールに表示されます。 $_.length は、名前の配列の長さです。
コンソールに次のコードを入力し、Enter キーを押します。
```
$_
```
$_ は常に、以前に評価された式を参照します。これは現在、数値 4 です。

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

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

$0 は、最後に選択した要素または JavaScript オブジェクトを返 $1 、最後に選択した 2 番目の要素を返します。 $0、$1、$2、$3、$4変数は、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 セレクター selectorに一致する最初の DOM 要素への参照を返します。

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

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

構文

$(selector, [parentElement])

例 1

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

例 2

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

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

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

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

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

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

構文

$$(selector, [parentElement])

例 1

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

例 2

この $$() 関数では、検索する親要素を指定する 2 つ目のパラメーター parentElementもサポートされています。パラメーターの既定値は 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")」と入力します。 Web ページ内のすべての <li> 要素が表示されます。

例 2

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

他のセレクターコマンドと同様に、 $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));
```
コードスニペットは、 $$(selector) 関数を使用して Web ページ内のすべての要素を選択し、各要素の tagName プロパティを配列にマップします。その後、 copy() 関数を使用して、配列がクリップボードにコピーされます。
クリップボードの内容をテキストエディターに貼り付けます。クリップボードの内容は、次のように、Web ページ内のすべての HTML タグの一覧です。
```
["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
```

debug(function)

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

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

構文

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 表現が表示されます。
「 dir(document.head) 」と入力し、 Enter キーを押します。

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

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

dirxml(object)

dirxml(object) console.dirxml()など、Elements ツールに表示されるように、指定したオブジェクトの 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) は、指定したオブジェクトに登録されているイベントリスナーを返します。

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

構文

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 キーを押します。
関数を呼び出すには、「 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"]);
```
前のコードスニペットでは、ウィンドウオブジェクトの resize と scroll の両方のイベントを監視するイベント名の配列を定義しています。
たとえば、ウィンドウのサイズを短くして、レンダリングされた 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 オブジェクトを使用している場合は、queryObjects(Promise) を使用して、Promise オブジェクトのすべてのインスタンスを返します。
web ページで JavaScript クラスを使用している場合は、 queryObjects(ClassName) を使用して、 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)の例を参照してください。

次の方法で共有

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

概要