古めのネタなんですが、$0, $1の参照と、monitorEventsでいろんな要素のイベントをいい感じに監視できる小技を今更知って便利だったのでメモ。 Safari / Chromeで使えるようです。

$0, $1, $2.. で選択した要素の参照を直接取得できる

Elementsタブで選択した要素は、アクティブなものは $0　以降、ひとつ前に選択したものは $1 そのひとつ前は $2 といった変数でconsole内で参照として利用できます。

わざわざ document.querySelector('') とか毎回やっていたのですが、よく見るとインスペクタにグレー文字で = $0 って表示されていてヒントがあったんですね。気がつかなかった...。

monitorEvents(el, events) で、イベント監視をする

特定のイベントを監視したい場合、 $0.addEventListener('click', console.log) でもOKです。

しかし、monitorEventsはもう少し便利な関数となっており、eventsがundefined(無指定)の場合は発生するすべてのイベントを、文字列の場合は1つのイベント、文字列配列の場合は複数のイベントを監視できます。

例えば、クリックイベントを監視したければ

monitorEvents($0, 'click');

keydown keyupを監視したければ

monitorEvents($0, ['keydown', 'keyup'])

windowに送られてくるpostMessageを監視したければ

monitorEvents(window, 'message')

windowの全てのイベントを監視したければ

monitorevents(window)

となります。

たくさん使うことはないかもしれませんが、知っていると微妙にお得になる小ネタでした。