web-dev-qa-db-ja.com

Chrome javascriptデバッガーを使用してイベントを追跡する

ここには特定のユースケースはありませんが、時々SOで誰かを助けたり、Webサイトでクールなjavascript効果を見て、それを駆動するコードに興味があります。ただし、コードを駆動するイベントはすぐにはわからない場合があります。イベントハンドラが見つからない場合、関心のあるエフェクトの原因であるjsを見つけるのは非常に困難です。要素にアタッチされたイベントを識別し、起動時にブレークポイントをドロップするには？

そのため、たとえば、イベントが次のような構造上に存在する場合があります。

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

イベントがimg、span、li、ul、またはdiv自体にバインドされているかどうかはわかりません。 Chromeにはイベントリスナーエリアがありますが、常にイベントが含まれているわけではありません。イベントをすばやく見つけてブレークポイントをドロップできるようにすることはできますか？

javascriptdebugginggoogle-chrome-devtools
33
mrtsherman

はいあります！

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

  • サブツリーの変更を中断する
  • 属性変更の中断
  • ノード削除で中断

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

40
Matthew

.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 / その他。

7
BrianFreud

chrome dev toolsの要素を右クリックして、 'break on'をクリックすると、サブツリーの変更など、複数の選択が表示されます。または、chrome // :: tracingに移動することもできます。

0
Alex Shilman