6

作業中の非常に複雑なHTML5アプリ（バックボーン、マリオネット、jQuery、アンダースコア、ハンドルバー、ブートストラップなど）があり、アプリの奥深くにフォームを含むモーダルポップアップがあります。

モーダルが開くと、フォームフィールドを初めてクリックすると、フォームフィールドの選択が解除されます。その最初のクリックの後、通常どおりフォームを使用できます。アプリが最終的に本番環境の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内でアプリを再作成して（不可能）、例にリンクする必要があるためです（ 、外部向けのサイトではないので、本番環境でライブにリンクすることはできません）。

私は困惑しています。

4

1 に答える 1

11

これが私がChromeでそれを行う方法です。

  1. Ctrl-Shift-JJavascriptコンソールを開きます。

  2. 左下の小さな虫眼鏡をクリックすると、マウスで要素を選択できます。

    虫眼鏡をクリックします

  3. ページ上の要素をクリックします（移動するとハイライト表示されます）。下部のDOMでハイライト表示され、右下に一連のプロパティが表示されます。

  4. 右下では、CSS属性を通り過ぎて、イベントリスナーに到達します。

    ???

  5. 関心のあるイベントリスナーを選択します。バインドされた関数と、実行されるスクリプトの正確なコード行が表示されます。それはあなたにどの図書館があなたのクレイジーなことをしているのかを教えてくれるはずです。

    利益！

Chromeデバッガーは、FireBugやIE開発者ツールと比較してはるかに強力で高速（遅れることはありません）であることがわかりました。強くお勧めします:)

于 2013-03-03T00:18:06.647 に答える