任意のイベントオブジェクトを Web ブラウザのコンソールに出力する monitorEvents が便利

4847 ワード
monitorEvents JavaScript ChromeDevTool PostMessage JavaScript テキストリンク

はじめに

前回 に引き続き、postMessage を使ってブラウザ内通信を監視するための調査中に monitorEvents [1] というものを見つけた。
クライアント(Web ブラウザ) とサーバ間の通信は DeveloperTool などのネットワークから調べることができるが、postMessage などを使ったブラウザ内の通信も監視したい。
monitorEvents を使うと、ブラウザ内の通信や任意の DOM のイベントを、コンソールから監視することができる。

目的

Web ブラウザ内の任意のイベントをコンソールから監視したい。

方法

公式リファレンスによると[1]、monitorEvents は任意の DOM に対して任意のイベントを監視し、イベント発火時にコンソールにイベントオブジェクトを出力してくれる。
Chrome 対応。
monitorEvents はグローバル関数。

monitorEvents(<DOM>, <イベント名>);

<DOM>: DOM Object
ex. window, $('a'), $('#msg')

<イベント名>: String or Array(任意)
ex. 'click', 'resize', 'scroll', 'keydown', 'message'

例: ウィンドウのリサイズイベントを監視

monitorEvents(window, 'resize');

(参照 [2])

例: 指定した DOM のクリックイベント監視

monitorEvents(window, 'click');

(参照 [3])

例: 指定した DOM の全イベント監視

monitorEvents($('#hoge'));

例: ブラウザ内の postMessage イベント監視

当初の目的。これがやりたかった!

monitorEvents(window, 'message');

例えば例えば、あるブラウザに Facebook JavaScript SDK を読み込むと、iframe DOM が生成され facebook.com のドメインが読み込まれる。この時、Facebook OAuth ログインするために FB.login() を実行した際、postMessage を使って iframe とどんな通信をしているのか...? なんてことも、monitorEvents を使って受送信する情報およびホストを監視できる!
ちなみにこの時 iframe から受信した情報は以下。
(ブラウザ内で別ドメインと通信する postMessage については 前回 を参照。)

event: {
  data: "_FB_fe44280d8cb=f264aee198&domain=mydomain.com&origin=https%3A%2F%2Fmydomain.com%2Ffe44280d8&relation=opener&frame=f1989e114c&signed_request=efy792iBaf10hurSrVapUIi9Ljcy20bX_eybHZZn8Js.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiwwwUNOY2QxMC0tQ0lZd2otdEthaFZibWZ1TE1jeUl1QVJOellTSXplTmJXcENWLXl3MW1UaFNPbkhkZ3Vjc3lnZHBMVURGd05yQV9RZHZVZjFienp0WlRjQlE0QzU2cUJTNHM1a1JmRUw3M1ZvbjBBZmFkVXpGMjRzQjBeeeZQejRfejFfT3dkdXpFRGJ0SnlLdWl5ek9DY1lVMWVvRUZpX1pqMGM2dXBTaEVsV2RvcUNuQzB2RE1rOEJSbkRva2ZhR3E3RWhDVVliWFFTejV3S2NDVk9YWkR4ZmEtZzdLQ3Y1UDM2SkJDRjlYaXAzMmZBS1lzZXRueUdkcW50RjlaMlRNbkVDdFM0TEh3UE9tdlBlMTY1Wkk2UE9xZ3lKMFlraWlEVHNvUFBoRkRHNWVaZ2JPeEp2a2FTRHNMTU1TSzBBUVpwOUdKQ05GTDMxWjJILU83ckJlWCIsImlzc3VlZF9hdCI6MTQxMzM2NDcwMiwidXNlcl9pZCI6Ijc1MTc1NTMwMTU1MzQxMSJ9&access_token=CAAJh14zkSI4BABJu4rZC22D1aR5ef0kZCfd9Ld1j8ItgpKVvaaxKr0WCh04zYIgdddddG8pWYBZCCKwiCpczSOkcZA52M4dpZC9KJJFVsXw2Us2xIvMvmQ7hmavNv3GoZA8OeJKklHRujaM6ZCLEpq7tksIHBC9QPGDE0aUEmltsKt6sF6p357Kb7WYQSiWWdroXSW3Pa8IGmk2mhMaZ228w&expires_in=6098&base_domain=&e2e=%7B%22submit_0%22%3A1413364702770%7D"
}

OAuth 認証時に発行される access_token 発見。ネットワークの通信からでは見つからなかった情報がどんどん出てきた♪

まとめ

monitorEvents を使ってブラウザ内のイベント監視することでデバッグに役立ちそう。
今更知ったのですが、便利だったのでメモがてら投稿。

[1] https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events
[2] https://developer.chrome.com/devtools/docs/commandline-api-files/monitor-resize.png
[3] https://plus.google.com/u/0/+UmarHansa/posts/jf4mCvrayk8