33

ここでは特定のユースケースはありませんが、SOで誰かを助けたり、WebサイトでクールなJavaScript効果を見て、それを駆動するコードに興味を持ったりすることがあります。ただし、コードを駆動するイベントはすぐには明らかにならない場合があります。イベントハンドラーが見つからない場合は、関心のある効果の原因となるjsを見つけるのが非常に難しい場合があります。デバッガーで要素にアタッチされたイベントを識別してブレークポイントをドロップする簡単な方法はありますか？それが発砲したときに？

たとえば、イベントは次のような構造に存在する可能性があります

<div>
  <ul>
     <li><span><img /></span></li>
  </ul>
</div>

イベントがimg、span、li、ul、またはdiv自体にバインドされているかどうかはわかりません。Chromeには[イベントリスナー]領域がありますが、必ずしもイベントが含まれているとは限らないようです。イベントをすばやく見つけてブレークポイントをドロップできるようにするために、皆さんが行うことはありますか？

4

3 に答える 3

41

はいあります！

リロードされている要素を見つけて右クリックし、コンテキスト メニューから [検査] を選択してから、要素の html を右クリックします (下部の firebugish ペインで)。コンテキスト メニューには次のオプションがあります。

  • サブツリーの変更でブレーク
  • 属性の変更でブレーク
  • ノードの削除で中断

Chrome のすばらしい新しい開発機能に関する記事: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

于 2011-08-14T03:02:01.503 に答える
7

.js にアクセスできる場合は、「debugger;」を追加するだけです。独自のラインで。Chrome (または FF) がそれにヒットすると、デバッガーがトリガーされ、ウォークスルーできます。どのコードがイベントをトリガーするかについての一般的な考えがある場合に特に役立ちます。http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/を参照してくださいもっと。

于 2012-01-22T06:23:48.907 に答える