どのように私は神秘的にバインドされたJavaScriptイベントを見つけることができます

Question

私は（バックボーン、マリオネット、jquery、アンダースコア、ハンドルバー、ブートストラップなど）で作業している非常に大きな複雑なHTML5アプリケーションを持っており、その中に形があります。

モーダルポップを開くと、最初にフォームフィールドをクリックするとフォームフィールドの選択が解除されます。最初のクリック後、フォームを通常通り使用できます。フォームフィールドをクリックするか、任意のボタンの上にカーソルを置いたときにアプリケーションがiFrameに最終的に読み込まれると（質問しないで）、フォーム全体が内部にあるdiv要素の上部までスクロールしますモーダルはページの一番上にありますが、これを一度やり直しても、もう一度やりません（まだ混乱していますか？それは複雑で階層的です）。

私はこの問題（数千行のコード、2冊の少数のライブラリ）のデバッグを開始する方法についても迷っています。

私はこれらを試してみました：

console.log('bound events: ', $._data(this.$el.find('#RandomFieldID')[0], 'events')); 
console.dir($('#elmId').data('events')); 
console.log('bound events: ', $._data($('body')[0], 'events')); 

しかし、何も得られなかったという。

これはフレームワーク上のフレームワーク上のライブラリにあるライブラリなので、明らかにこれらのフィールドにバインドされているものがどこにあるかを確認しようとしていないか、バインドされているフィールド何か完全に...

不思議にバインドされたjavascriptイベントをデバッグする方法（複数のJSライブラリとフレームワークがあり、問題が解決されるまでコメントアウトすることはできません）最初にHTMLをページに表示させることさえできますか？）

残念ながら、私が言ったように、これはアプリ内の深いところであり、基本的にはJSFiddle（不可能）内のアプリを再作成する必要があるため、jsfiddleや何かを行うことはできません例（それは外向きのサイトにはないので、私はそれを実稼働環境に生きているだけにリンクすることはできません）。

私は困惑しています。助けてくれてありがとう！

Answer 1

ここではChromeでどのように行うのですか。

1. Ctrl-Shift-J Javascriptコンソールを開く。

2. 左下にある小さな拡大鏡をクリックすると、マウスで要素を選択できます。

   

3. ページ上の要素をクリックします（あなたがそこに行くように、それが強調表示されます。）これは、一番下にあるDOMで強調表示し、右下のプロパティの束が表示されます。底部では

4. 右イベントリスナーまでのCSS属性とスタッフを過ぎてすべての道を行く：

   

5. あなたが興味を持っているイベントリスナーを選ぶことはあなたにバインドされたが表示されます。どのスクリプトが実行されるのかについての正確なコード行が表示されます。それはあなたの狂ったことをしているライブラリを教えてくれるはずです。

   

私は放火魔とIEの開発ツールに比べて（遅れていません）クロームデバッガははるかに強力かつ高速であることがわかりました。非常にお勧めします:)