web-dev-qa-db-fra.com

Suivez les événements à l'aide du débogueur JavaScript de Chrome

Je n'ai pas de cas d'utilisation spécifique ici, mais j'ai parfois aidé soit quelqu'un sur SO, soit vu un effet javascript génial sur un site Web et j'étais curieux de connaître le code qui le régit. Toutefois, 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, il peut être très difficile de trouver le responsable des effets qui m’intéresse. Existe-t-il un moyen rapide dans le débogueur d’identifier les événements liés à un élément et de supprimer un point de rupture quand ça se déclenche?

Ainsi, par exemple, un événement peut exister sur une structure du genre 

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

Maintenant, je ne sais pas si l'événement est lié à l'img, span, li, ul ou div lui-même. Chrome a la zone Event Listeners, mais j’ai l’impression que cela ne contient pas toujours des événements. Tout ce que vous faites, qui vous permet de trouver rapidement l’événement et d’y déposer un point de rupture?

javascriptdebugginggoogle-chrome-devtools
32
mrtsherman

oui il y a!

recherchez l'élément à recharger et cliquez avec le bouton droit de la souris sur choisissez inspecter dans le menu contextuel, puis cliquez avec le bouton droit de la souris sur le code HTML de l'élément (dans le volet inférieur de firebugish), :

  • pause sur les modifications de sous-arbre 
  • pause sur les modifications d'attributs
  • rupture sur suppression de nœud

Article sur les nouvelles fonctionnalités de développement en chrome: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

39
Matthew

Si vous avez accès au fichier .js, ajoutez simplement "debugger;" sur sa propre ligne. Chaque fois que Chrome (ou FF) l’a frappé, le débogueur est déclenché et vous permet de naviguer. Esp utile si vous avez une idée générale du code qui déclenchera 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.

7
BrianFreud

Cliquez avec le bouton droit de la souris sur l'élément dans chrome dev tools et cliquez sur "Interrompre" pour afficher plusieurs sélections, telles que des modifications de la sous-arborescence. Ou vous pouvez aussi aller à chrome //: traçage

0
Alex Shilman