Console Utilities API には、DOM 要素の選択と検査、オブジェクトのクエリ、読み取り可能な形式でのデータの表示、プロファイラの停止と起動、DOM イベントと関数呼び出しの監視など、一般的なタスクを実行するための便利な関数が用意されています。
console.log()
、console.error()
、その他の console.*
関数をお探しですか?Console API リファレンスをご覧ください。
$_
$_
は、最後に評価された式の値を返します。
次の例では、単純な式(2 + 2
)が評価されます。次に、同じ値を含む $_
プロパティが評価されます。
次の例では、評価された式に最初に名前の配列が含まれています。$_.length
を評価して配列の長さを検出すると、$_
に格納されている値は最新の評価された式 4 に変更されます。
$0 ~$4
$0
、$1
、$2
、$3
、$4
コマンドは、[Elements] パネルで検査された直近の 5 つの DOM 要素、または [Profiles] パネルで最後に選択された 5 つの JavaScript ヒープ オブジェクトへの履歴参照として機能します。$0
は最近選択された要素または JavaScript オブジェクトを返し、$1
は 2 番目に最近選択された要素または JavaScript オブジェクトを返すというように続きます。
次の例では、[Elements] パネルで img
要素が選択されています。[コンソール] ドロワーでは $0
が評価され、同じ要素が表示されます。
下の画像は、同じページ内で選択された異なる要素を示しています。これで、$0
は新しく選択された要素を参照するようになり、$1
は以前に選択された要素を返します。
$(selector [, startNode])
$(selector)
は、指定された CSS セレクタを持つ最初の DOM 要素への参照を返します。この関数は、1 つの引数を指定して呼び出すと、document.querySelector() 関数のショートカットになります。
次の例では、ドキュメント内の最初の <img>
要素への参照を返します。
返された結果を右クリックし、[[要素] パネルで表示] を選択して DOM で見つけるか、[ビューにスクロール] を選択してページに表示します。
次の例では、現在選択されている要素への参照を返し、その src
プロパティを表示します。
この関数は、要素を検索する「要素」またはノードを指定する 2 番目のパラメータ startNode
もサポートしています。このパラメータのデフォルト値は document
です。
次の例では、devsite-header-background
の子孫である最初の img
要素への参照を返し、その 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);
}
を使用します。
l10n-placeholder3() を使用して、選択したノードの後の現在のドキュメントに表示されるすべての <img>
要素の配列を作成します。
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$x(パス [, startNode])
$x(path)
は、指定された XPath 式に一致する DOM 要素の配列を返します。
たとえば、次のコマンドはページ上のすべての <p>
要素を返します。
$x("//p")
次の例では、<a>
要素を含むすべての <p>
要素を返します。
$x("//p[a]")
他のセレクタ関数と同様に、$x(path)
にはオプションの 2 番目のパラメータ startNode
があり、要素を検索する要素またはノードを指定します。
clear()
clear()
は、コンソールで履歴を消去します。
clear();
copy(object)
copy(object)
は、指定されたオブジェクトの文字列表現をクリップボードにコピーします。
copy($0);
デバッグ(関数)
指定した関数が呼び出されると、デバッガが呼び出され、[Sources] パネルの関数内で中断するため、コードをステップ実行してデバッグできます。
debug(getData);
undebug(fn)
を使用して関数での中断を停止するか、UI を使用してすべてのブレークポイントを無効にします。
ブレークポイントの詳細については、ブレークポイントでコードを一時停止するをご覧ください。
dir(object)
dir(object)
は、指定されたオブジェクトのすべてのプロパティをオブジェクト スタイルのリストで表示します。このメソッドは、Console API の console.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 要素の場合は [Elements] パネル、JavaScript ヒープ オブジェクトの場合は [Profiles] パネル)を開き、指定された要素またはオブジェクトを選択します。
次の例では、[要素] パネルで document.body
を開きます。
inspect(document.body);
検査する関数を渡すと、その関数によってドキュメントが [ソース] パネルに表示され、検査できるようになります。
getEventListeners(object)
getEventListeners(object)
は、指定されたオブジェクトに登録されているイベント リスナーを返します。戻り値は、登録された各イベントタイプ(click
や keydown
など)の配列を含むオブジェクトです。各配列のメンバーは、各タイプに登録されているリスナーを記述するオブジェクトです。たとえば、次の例では、ドキュメント オブジェクトに登録されているすべてのイベント リスナーの一覧が表示されています。
getEventListeners(document);
指定されたオブジェクトに複数のリスナーが登録されている場合、配列には各リスナーのメンバーが含まれます。次の例では、click
イベントのドキュメント要素に 2 つのイベント リスナーが登録されています。
これらの各オブジェクトをさらに開いて、プロパティを確認できます。
詳しくは、オブジェクトのプロパティを検査するをご覧ください。
keys(オブジェクト)
keys(object)
は、指定されたオブジェクトに属するプロパティの名前を含む配列を返します。同じプロパティの関連する値を取得するには、values()
を使用します。
たとえば、アプリケーションで次のオブジェクトを定義したとします。
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
わかりやすくするために、player
がグローバル名前空間で定義されていると仮定します。コンソールで keys(player)
と values(player)
を入力すると、次のようになります。
monitor(function)
指定された関数が呼び出されると、関数名と呼び出されたときに渡された引数を示すメッセージがコンソールに記録されます。
function sum(x, y) {
return x + y;
}
monitor(sum);
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" |
たとえば以下の例では、[要素] パネルで現在選択されている入力テキスト フィールドで、対応するすべてのキーイベントとして「キー」イベントタイプを使用しています。
monitorEvents($0, "key");
以下は、テキスト フィールドに文字を入力した後の出力例です。
unmonitorEvents(object[, events])
を使用してモニタリングを停止します。
profile([name]) と profileEnd([name])
profile()
は、オプションの名前を指定して JavaScript CPU プロファイリング セッションを開始します。profileEnd()
によってプロファイルが完成し、[Performance] > [Main] トラックに結果が表示されます。
プロファイリングを開始するには:
profile("Profile 1")
プロファイリングを停止して、[Performance] > [Main] トラックで結果を確認するには:
profileEnd("Profile 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);
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);