kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Chrome に jQuery Debugger を導入してみた

最近「この Ajax どこから呼ばれてんのよー」なんて独り言を言いながら jQuery のセレクタに設定されてるイベントを探したりしてたんだけど,どう考えても非効率だなと思ってググってみたら Chrome の拡張機能で jQuery Debugger っていうのを発見した.

chrome.google.com

Usage.1

(Qiita をサンプルにキャプチャした)

デベロッパーツールを開いて「jQuery Selector Inspector」タブを開く.テキストフィールドから idclass を登録して選択すると,実際の画面上で該当する箇所がハイライトされる.

f:id:kakku22:20150917211110p:plain

Usage.2

(Qiita をサンプルにキャプチャした)

逆に「Elements」タブから具体的な要素を追うこともできて,右側の「jQuery Events」タブから click イベントを追っていくこともできる.実際に呼び出されるコードも確認できるので,実際にはこっちを頻繁に使うことになりそう.便利!

f:id:kakku22:20150917211124p:plain

まとめ

もうちょっと使ってみようと思うけど,ある程度は効率的に調べられそうな気がする.未来のことを考えると React.js も気になってる.勉強しよ!

関連エントリー