33 votes

Suivre les événements à l'aide du débogueur javascript Chrome

Je n'ai pas de cas d'utilisation spécifiques ici, mais de temps en temps j'ai été, soit en les aidant quelqu'un sur ou vu un endroit frais javascript effet sur un site web et d'été curieux de connaître le code qui l'anime. Cependant, l'événement qui entraîne le code peut ne pas être immédiatement évident. Si je ne trouve pas le gestionnaire d'événements, alors il peut être vraiment difficile de trouver la js responsable pour les effets, je suis intéressé. Est-il un moyen rapide dans le débogueur pour identifier les événements attaché à un élément et à déposer un point de coupure dans quand il se déclenche?

Ainsi, par exemple, un événement peut exister sur une structure quelque chose comme ça

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

Maintenant, je ne sais pas si l'événement est lié à l'img, la plage, le li, ul ou div lui-même. Chrome a les Écouteurs d'Événement de la zone, mais je sens que ça ne contiennent pas toujours des événements. Tout ce que vous les gars ne vous permet de trouver rapidement l'événement et de les déposer à un point de rupture en elle?

40voto

Matthew Points 4695

oui, il y est!

trouver l'élément qui est en train d'être rechargé et faites un clic droit, choisissez inspecter à partir du menu contextuel, puis faites un clic droit dans le code html de l'élément (dans le bas firebugish volet), dans le menu contextuel, il ya des options pour:

  • pause sur la sous-arborescence des modifications
  • pause sur les attributs de modifications
  • pause sur le nœud de suppression

Article génial nouveau dev fonctionnalités de google chrome: http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html

7voto

BrianFreud Points 1048

Si vous avez accès à l' .js, il suffit d'ajouter "débogueur;" sur sa propre ligne. Chaque fois que Chrome (ou FF) coups, il va déclencher le débogueur et vous permettent de marcher de travers. Esp utile si vous avez quelques idée générale, le code qui va déclencher l'événement. Voir http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/ pour plus d'.

0voto

Alex Shilman Points 1193

Cliquez avec le bouton droit sur l'élément dans les outils de développement de chrome, puis cliquez sur «Activer», vous verrez alors plusieurs sélections telles que des modifications de sous-arborescence. Ou vous pouvez également aller sur chrome //: tracing

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X