Chrome DevTools Console で使える便利なコマンド
はじめに
この記事は #EveOneZenn (Everyday One Zenn) vol.03 です。
今回は Chrome DevTools の Console で使用できるコマンド（ Utilities API ）についてまとめます。
なお、紹介するコマンドはすべて、 Console パネルから実行した場合のみ使用できます。
前回：
参照系
$_
$_ は Console パネル上で直近に実行された処理の結果を参照します。
これを活用すると、Promise を返した関数を await させることができます。
$0 - $4
$0 は Elements パネル上でアクティブな要素を参照します。
Elements パネル上で == $0 と表示されている要素が $0 で参照できる要素です。
また、$1・$2・$3・$4 で直近で選択していた要素を参照できます。
$(selector, [startNode])
document.querySelector ライクなメソッドです。
第２引数に検索対象の親要素を指定すると、その要素の子孫要素からセレクタにマッチする要素が返されます。
$$(selector, [startNode])
document.querySelectorAll ライクなメソッドです。
第２引数に検索対象の親要素を指定すると、その要素の子孫要素からセレクタにマッチする要素が返されます。
$x(path, [startNode])
XPath にマッチする要素を参照します。
getEventListeners(object)
指定したオブジェクトに登録されているイベントリスナの一覧を参照します。
$0 と組み合わせれば、選択している要素に登録されているイベントリスナの一覧を参照できます。
inspect(object/function)
引数に指定した Object/Function を Elements パネルまたは Source パネルで開きます。
たとえば、 inspect($( selector )) を実行すると、セレクタにマッチする要素を Elements パネルで開きます。
queryObjects(Constructor)
引数に指定したコンストラクタのインスタンスが配列で返されます。
たとえば、 queryObjects(Promise) ですべての Promise を、 queryObjects(HTMLElement) ですべての HTML要素 を参照できます。
監視・デバッグ系
copy(object)
指定したオブジェクトを文字列化してクリップボードへコピーします。
このとき、HTML要素 はそのまま文字列化されますが、オブジェクトは可読性の高い形式でコピーされます。
debug(function) / undebug(function)
指定した関数が実行される直前で処理を中断し Source パネルでコードをステップ実行できます。
デバッグを停止するには undebug(function) を使用するか、UIからすべてのブレークポイントを無効にします。
monitor(function) / unmonitor(function)
指定した関数が実行されるたびに、関数名と指定された引数を Console パネルに表示します。
監視を停止するには unmonitor(function) を使用します。
monitorEvents(object[, events]) / unmonitorEvents(object[, events])
指定したオブジェクトに対してイベントがトリガーされるたびに、イベント名とイベント内容を Console パネルに表示します。
イベントには mouse・key・touch・control がプリセットとして用意されており、それぞれ次のイベントを監視します。
| プリセットイベント | 監視されるイベント |
|---|---|
| mouse |
mousedown, mouseup, click, dblclick, mousemove, mouseover, mouseout, mousewheel
|
| key |
keydown, keyup, keypress, textInput
|
| touch |
touchstart, touchmove, touchend, touchcancel
|
| control |
resize, scroll, zoom, focus, blur, select, change, submit, reset
|
監視を終了するには unmonitorEvents(object[, events]) を使用します。
profile([name]) / profileEnd([name])
JavaScript の CPUプロファイリング を記録します。
profile([name]) でプロファイリングセッションを開始し、 profileEnd([name]) で終了します。
プロファイリングセッションはネストして実行することもできます。
記録した CPUプロファイリング は JavaScript Profiler パネルで確認できます。
メニューから More tools → JavaScript Profiler と選択してパネルを表示します。
エイリアス系
clear()
Console パネルの履歴をクリアします。
console.clear() メソッドと同等の機能です。
dir(object)
指定したオブジェクトを JSON表現 で表示します。
console.dir() メソッドと同等の機能です。
dirxml(object)
指定したオブジェクトを XML表現 で表示します。
console.dirxml() メソッドと同等の機能です。
keys(object) / values(object)
指定したオブジェクトのキーおよび値の配列を取得します。
Object.keys() メソッド・ Object.values() メソッドと同等の機能です。
table(data[, columns])
データを表の形式で表示します。
console.table() メソッドとほぼ同等の機能ですが、表示する列を指定できます。
おまけ
出力された値を使用する
Console パネルに出力されたデータを 右クリック → Store as global variable とすると、 temp[N] というグローバル変数にデータが代入されます。
実際のコードから出力されたデータを加工したり転用したりするときに便利です。
Discussion