Google Chrome の Developer Tool でイベントがデバッグしやすくなった

2827 ワード
Chrome デバッグ ChromeDevTool jQuery Chrome テキストリンク

はじめに

結論からいうと、
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" );
        });