jQueryで指定されたイベントの定義場所を取得する方法
セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。
調べたところ良さそうな方法があったのでシェアしておきます。
ちょっと動画に取ってみたので、動画でご確認ください。
なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。
次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。
次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。
$._data($("#js_debug").get(0), "events");Object->click->0の順番に開いていき、「handler: function (){」で右クリックして「Show Function Definition」を選択すると要素にイベントを指定したファイルの指定箇所にジャンプします。
複数のファイルが乱雑してどこに何が定義されているかわからない場合などに利用できる方法ですので試してみてください。
参考:Finding source of JQuery onclick handlers with Google Chrome
関連エントリー
Google Chrome 32でスマホのエミュレーションを行う
Google Chromeでスマホサイト制作
Google ChromeでCSSがSassの何行目に記述されているか確認する方法
Google PageSpeed Insights でパフォーマンスチューニング
スポンサードリンク
«現場のプロが教えるWeb制作の最新常識 が増刷されました | メイン
- このエントリーのトラックバックURL