[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita の内容が便利だなと思いながら、最後にリンクされていた Command Line API Reference | Web | Google Developers を読むと、他にも知らなかった機能があったので言及されていなかった機能について簡単に補足する。
注意として、Developer Tools の console 内でのみ有効で、スクリプトにこれらを記述しても機能の実行はできない。
最近選択された要素または JavaScript ヒープオブジェクトの履歴参照を取得
$0 から $4 には、[Elements]パネル内で最後に検査された5つの要素、または[Profiles]パネルで選択された最後の5つのJavaScriptヒープオブジェクトの履歴参照が入っている。
$0 は直前に選択された要素となる。
該当するものがなければ undefined が返される。また、$5 は無いので ReferenceError になる。
XPath による要素を取得
$x(path) で path に XPath を指定すると、該当する要素の配列が取得できる。
クリップボードにコピー
copy(object) で object の文字列をクリップボードにコピーする。
copy('abc') // 'abc' がコピーされる
copy([1,2,3]) // [1,2,3] がコピーされる
copy($0) // 選択している要素がコピーされる
オブジェクトのキーと値の一覧を取得
keys(object) で object のキー一覧、values(object) で object の値一覧が取得できる。
関数内でブレーク
debug(function) で function が呼ばれた直後にブレークするようになる。ブレークポイントが置かれるような動作。
ブレークポイントの全無効化ボタンの対象になっている。ただし、行番号エリアと Breakpoints（ブレークポイント一覧）にブレークポイントとして表示されない。
解除は undebug(function)。
通常ブレークポイントは[Sources]タブでマウスからコードの行番号をクリックして置くケースが多そうだが、圧縮されたりトランスパイルされたコードだと、該当行まですぐに辿りつく事が手間なので便利かもしれない。
ただ、ページをロードした直後に確認したい関数に対しては無理？
ブレークポイントについては How to set breakpoints | Web | Google Developers を参照。
関数を監視
monitor(function) で function を監視し、呼び出された事を引数付きでログに出力する。
例えば
「関数内でブレーク」と同様に、圧縮されたりトランスパイルされたコードに対して便利そう。特にブレークポイントを置くほどではなく、簡単に確認したい場合など。
監視解除は unmonitor(function)。
JavaScript の CPU プロファイル
Profiles タブの JavaScript CPU プロファイル開始・終了はマウス操作だけでなく、それぞれ profile([name]) と profileEnd([name]) で実行できる。
name はプロファイル名で、指定しなかった場合 Profile [番号] になる。
CPU プロファイルによる高速化については Speed Up JavaScript Execution | Web | Google Developers を参照。