HTMLの要素(タグ)に登録されているjavascriptのイベントを確認する(chromeのDeveloper Toolsを利用)

環境
OS: Windows 7
chrome: 62.0.3202.94

jQuery等を利用してidやclassにイベントを割り当てている場合、 HTMLのソースをぱっと見ただけではどういった処理が行われているか確認するのが大変です。

そんな場合にはgoogle chromeのDeveloper toolsを利用すると確認が楽になります。
(Developer toolsの起動はchormeを利用している状態でF12キーを押下)



上図のようにchromeのDeveloper toolsをF12キーで起動して、 Elementsの中から対象の要素(タグ)を選択します。
(右上の矢印アイコンからページ上の要素を選択することもできます)

次にウィンドウ右側のEvent Listenersタブを選択してAncestorsにチェックAllを選択 Framework listenersにチェックを入れると対象のイベントが表示され、 対象要素の右側にあるリンクをクリックすると実際の処理(宣言)部分にジャンプする 事が出来ます。



Ancestorsにチェックを入れると関連する親要素のイベントを表示するようになります。
対象の要素だけのイベントを確認したい場合はチェックは不要です。
この記事は役に立ちましたか?
  • 役に立った(0)
  • もっと詳しい情報が必要(0)
  • 情報が古かった(0)
  • 目的の情報では無かった(0)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする