56
59

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-12-11

はじめに

結論からいうと、
jQueryで設定されたクリックイベントなどを定義している場所を調べる方法
に記載されているようなことが Google Chrome の Developer Tool で簡単にできるようになった :blush:

おそらく、Google Chrome 47.0.2526.80 で増えた機能。
とりあえず、最新バージョンを導入すれば機能追加されてるはず。

実際にデバッグしてみる

検証サイト

要素の検証

これクリックしたら、どんなことが起きるんだろうか…?
という場合はまず、右クリックとかショートカット使って要素を検証しましょう :stuck_out_tongue_closed_eyes:

今回は例として Create new user というボタンをクリックした時の処理をみてみます。

1.png

要素を検証したら、右の方に Event Listeners というタブがあるので選択します。
Ancestors とか Framework listeners というオプションがあるかと思います。

そう、 Framework listeners にチェックが入っていると jQuery などでイベントリスナーを定義した場合でも、もとのソースまで追えるようになっています。

2.png

チェックしたら、modal-form.html:109 がありますね。

これをクリックしてみると、、、

3.png

キタ━━━━(゚∀゚)━━━━!!

		$( "#create-user" ).button().on( "click", function() {
			dialog.dialog( "open" );
		});
56
59
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
56
59

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?