はじめに
結論からいうと、
jQueryで設定されたクリックイベントなどを定義している場所を調べる方法
に記載されているようなことが Google Chrome の Developer Tool で簡単にできるようになった
おそらく、Google Chrome 47.0.2526.80 で増えた機能。
とりあえず、最新バージョンを導入すれば機能追加されてるはず。
実際にデバッグしてみる
検証サイト
要素の検証
これクリックしたら、どんなことが起きるんだろうか…?
という場合はまず、右クリックとかショートカット使って要素を検証しましょう
今回は例として Create new user
というボタンをクリックした時の処理をみてみます。
要素を検証したら、右の方に Event Listeners
というタブがあるので選択します。
Ancestors
とか Framework listeners
というオプションがあるかと思います。
そう、 Framework listeners
にチェックが入っていると jQuery
などでイベントリスナーを定義した場合でも、もとのソースまで追えるようになっています。
チェックしたら、modal-form.html:109
がありますね。
これをクリックしてみると、、、
キタ━━━━(゚∀゚)━━━━!!
$( "#create-user" ).button().on( "click", function() {
dialog.dialog( "open" );
});