[Javascript] UIに登録されているイベントを表示したい

Question

hasmany 先のテーブルを同一ページで編集できる cocoon というジェムを教えていただいたのですが
追加ボタンを押すとカラムが２個追加されてしまいます

<%= link_to_add_association (t 'user.add'), f, :favorites, {
      partial: 'favorites/form', 
      class: 'btn btn-default',
      id: 'add_favorite',
      data: {
        association_insertion_node: '#favorites tbody'
      }
    } %>

追加ボタン自体はこれなのですが
同じページにJSが大量にかかれているのでイベントが干渉してるような気がするんですが
何をどうデバッグしていいかわからず困っています

ボタンに登録されてるイベントを見る方法や
そのイベントがソースのどこにとぶかを調べる方法はないでしょうか

Answer 1

デベロッパーツールで。

【Google Chrome の Developer Tool でイベントがデバッグしやすくなった - Qiita】
https://qiita.com/madobon/items/9b2867a036860a8a19af

【ChromeのデベロッパーツールでJSをデバッグする方法(2018年版) - ICS MEDIA】
https://ics.media/entry/11735

Comments

[退会済みユーザー]

開発ツールに EventListener というのがあったんですね
いつも使ってたのに気づきませんでした
JS側でconsole.log で event を表示して中をひたすら見ていました…

まだ原因を特定できたわけではないのですがもう少し楽に調べられそうです
ありがとうございます

[退会済みユーザー]

require じゃなく javascript_include_tag でよばれたJSの中に require 'cocoon' がかかれていたため
2 回 cocoon.js が読み込まれていたようです
おかげですぐに原因が特定できました
ありがとうございました