Chrome Developer Tools で Event を Monitor(監視) する

2014年3月11日火曜日

Web実装の調査を行った時に調べたのでご紹介。

monitorEvents(object[, events])

objectにはeventを監視したいオブジェクトを渡す。
eventsには’click’や’focus’のようなイベントを指定。
‘mouse’ というまとまった指定も可能なようなので、詳細はReferenceを確認してください。

source: Command Line API Reference - Chrome DevTools — Google Developers

Developer Tools を開き、Consoleで以下を実行。

monitorEvents(window, "resize");

ウィンドウのサイズを変えると、発生したイベントのログがはかれます。

source: https://developers.google.com/chrome-developer-tools/docs/commandline-api?hl=ja#monitoreventsobject_events

その他にも関数の監視ができるようです。
Command Line API には他にも興味深い実装がいくつもあります。
関数だけならべておきますので内容は推して知るべしでよろしくお願いします。

functions	適当
$_	最後の計算結果を表示
$0 - $4:	コンソールで直近に操作したオブジェクト履歴(５個まで)
$(selector)	querySelector (jQueryではない。jQueryがロードされているページでは上書きされる。)
$$(selector)	querySelectorAll
$x(path)	xpathでselect (例: `$x('//a')`)
clear()	コンソールのクリア
copy(object)	引数をクリップボードにコピー
dir(object)	引数のプロパティを表示
dirxml(object)	引数をxmlで表示(普通のコンソール出力と変わらない？)
inspect(object)	DevToolsに表示(？)
getEventListeners(object)	event listener 取得
keys(object)	key,valueタイプの値のkeyの一覧を取得(オブジェクトのプロパティ名一覧など)
monitorEvents(object[, events])	イベントの監視
profile([name])	CPU プロファイリング
profileEnd([name])	CPU プロファイリング終了
unmonitorEvents(object[, events])	イベント監視終了
values(object)	key,valueタイプの値のkeyの一覧を取得(オブジェクトのプロパティ値一覧など)

元々は Firebug 時代(?)のFirefoxで実装されていた、Command Line API がChromeにも実装されているという捉え方で良いのかな？

Console API なんかもその流れかと思ってましたがあってますかね。

これでサイト解析が捗りそうです！

source: 第3回　Command Line APIとその活用，各タブからのデバッグ方法：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社

Written with StackEdit.

2014年3月11日火曜日