Firefox開発者ツール 要素に仕込まれたイベントを調べる

More than 1 year has passed since last update.

はじめに

今までFirefoxの開発者ツールを使った事がなく、chromeの開発者ツールで調べていましたがFirefoxだとえらく簡単に調べられたのでメモとして残します。

手順

①開発者(command+option+i)を開く。windowsはF12
画像1
スクリーンショット 2016-10-31 22.46.59.png
②インスペクタタブを選択(画像1の-①)
③イベントが仕込まれている要素には要素の横にevのマーキングがあるため、そのマーキングをクリック(画像1-②)
画像2
スクリーンショット 2016-10-31 22.53.29.png
画像3
スクリーンショット 2016-10-31 23.09.51.png
④evをクリックする事で現在要素に仕込まれているイベントの一覧が表示されます。
   また画像2-①のエリアをクリックする事で記載されているjsの内容が表示されます。
⑤デバッグを貼りたい時は、画像3-①がjsファイルへのリンクにもなっているためそこから貼れます。