要素Yをクリックした後に要素Xを表示するJavaScriptコード行を表示する方法

Question

変更するWordpress Webサイトがあります。

私はこの「ログイン」ボタンをクリックすると、それが隠されたフォームを表示します。

このイベントを同じページの他のボタンでトリガーしようとしているため、同じイベントが発生します。

私はクロムリスナーを試して、マウスクリックイベントを追跡しました。そこで、同じイベントのステップが表示されています。非常に控えめな方法で。

私はそれを追跡するためにFIREBUGを使用しようとしましたが、ボタンをクリックした後、私は「DOM」でもっと整理された情報を提供しました。

しかし、クリック後にページ上で発生する変更の残りの部分はどこからDOM出力から確認できますか？クリックイベントの後に影響を受ける他の要素どのようにトリガされたのか理解できるように、正確なコード行はどこで確認できますか？

編集：ビジュアルイベントを使用してみました - 私はポップアップウィンドウにコマンドラインが表示されますが、その場所については何も表示されません。私はすべての.jsファイルでコマンドを検索しようとしましたが、私はそれを見つけることができません。

私はこれを別のウェブサイトでテストしました。コマンドラインが見つかりました。

この場合、JSファイルはどこにありますか？

Answer 1

Firebugでは、HTML要素をクリックすると、eventsが表示されます。クリックイベントでどの関数が呼び出されているかを確認したら、コードをたどって他の関数が呼び出されているかどうかを調べることができます。

また、デバッグに便利なブレークポイントを配置することもできます。興味のあるブレークポイントはBreak On Attribute Changeです。これをログインボタンと組み合わせると、コードで何が起きているのかを把握できるはずです。