Firebug やその他のツールを使用して JavaScript イベント バインディングをデバッグするにはどうすればよいですか?

Firebug およびその他のツールを使用した JavaScript イベント バインディングのデバッグ

イベント バインディングの場合、jQuery ベースの Web アプリケーションでの複雑な DOM 操作のデバッグは困難になる場合があります謎に失敗する。ソース コードの編集ができない場合は、デバッグにブラウザ ツールを利用する必要があります。

イベント デバッグ用の Firebug

Firebug は DOM のナビゲーションと操作に優れていますが、そのイベント デバッグ機能はあまり明らかではありません。要素にバインドされたイベント ハンドラーを検査するには:

• DOM パネルで要素を見つけます。
• 「HTML」タブで要素の基礎となるデータを検査します。
• 「データ」セクションで、「イベント」ノードを展開します。
• 特定のイベント タイプ (「クリック」など) を展開すると、その要素に関連付けられたイベント ハンドラーのリストが表示されます。

例

$('#foo').click(function() { console.log('clicked!') }) を介してバインドされたイベント ハンドラーを持つ要素を想定します。 :

• 要素を調べ、その HTML データを展開して、「events」ノードを見つけます。
• 「click」イベント タイプを展開します。
• が表示されます。 「クリックされました!」を出力する関数定義

その他のデバッグ ツール

Firebug が利用できない場合、または適切でない場合は、次の代替ツールを検討してください:

• Chrome Developer Tools: [Events] タブで、関心のある要素でフィルタリングするか、タイムライン パネルで特定のイベントを選択します。
• React Developer Tools: が提供するものReact コンポーネントにバインドされたイベント ハンドラーをリストするイベント リスナー タブ。
• AngularJS Batarang: イベント リスナー情報へのアクセスを含む、AngularJS アプリケーションをデバッグするための拡張機能。

以上がFirebug やその他のツールを使用して JavaScript イベント バインディングをデバッグするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。