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

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

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

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

概要

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

Recently evaluated expression: $_

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

構文:

$_

例 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 番目に最後に選択した要素または JavaScript オブジェクトを返します。以下同様です。 $0、$1、$2、$3、$4 変数は、要素ツール内で検査された最後の 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 セレクターに一致する最初の要素が再実行されます。

クエリセレクター all: $$(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)関数が呼び出されたときに、[ソース] ツールで指定した関数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) [ 要素] ツール に表示される、指定されたオブジェクトの XML 表現 ( console.dirxml()など) を出力します。

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

構文

dirxml(object)

inspect(object/function)

inspect(element/function) [ 要素 ] ツールで指定された DOM 要素を開くか、[ ソース ] ツールで指定された JavaScript 関数を開きます。

DOM 要素の場合、この関数が開き、[ 要素 ] ツールで指定された 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(オブジェクト)」を参照してください。

構文

keys(object)

例

Ctrl+Shift+J (Windows、Linux) または Command+Option+J (macOS) を押します。 コンソール ツールが DevTools の Web ページの横で開きます。
コンソール ツールで、次のコードを入力し、Enter キーを押します。
```
var player1 = {"name": "Ted", "level": 42}
```
上記のコードスニペットでは、2 つのプロパティを持つ player1 という名前のグローバル名前空間内のオブジェクトを定義しています。
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;
}
```
上記のコードスニペットでは、2 つの引数を受け取る sum という名前の関数を定義しています。
sum 関数の監視を開始するには、コンソール ツールに「monitor(sum)」と入力し、Enter キーを押します。
関数を呼び出すには、「 sum(1, 2) 」と入力し、 Enter キーを押します。 sum 関数が呼び出され、関数に渡された引数を示すメッセージが表示されます。

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

monitorEvents(object[, events])

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

監視する 1 つのイベント、イベントの配列、または定義済みのイベントのコレクションにマップされる汎用イベントの種類の 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`	"ぼかし"、"変更"、"フォーカス"、"リセット"、"サイズ変更"、"スクロール"、"選択"、"送信"、"ズーム"

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

例

プロファイルにするページを新しいタブまたはウィンドウで開きます。たとえば、 Sluggish Animation デモページに移動します。
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(constructor)

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"
  }
};
```
上記のコードスニペットでは、2 つのプロパティを持つ names という名前のグローバル名前空間内のオブジェクトを定義しています。
names オブジェクトをテーブルとして表示するには、コンソールで「table(names)」と入力し、Enter キーを押します。

undebug(function)

undebug(function) 指定された関数のデバッグを停止して、関数の実行時にデバッガーが関数で一時停止しないようにします。

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

構文

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(オブジェクト) を参照してください。

構文

values(object)

例

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

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-09-11