Vous est-il jamais arrivé de vous arracher les cheveux pour trouver quelle ligne de js était à l’origine d’un comportement étrange dans la page ? La situation s’apparente assez à : “chercher une aiguille dans une botte de foin” ?
Eh bien je viens de découvrir une super astuce dans la console (sans doute présente depuis toujours). Il suffit d’inspecter l’élément, de lui faire un click droit et de choisir l’un des trois comportement suivant :
Break on Subtree Modifications permet d’écouter les interactions qui surviennent à l’intérieur de l’élément (sur ses enfants).
Break on Attributes Modifications permet d’écouter tout type de changement qui survient sur l’élément.
Break on Node Removal permet simplement d’écouter le moment où la div sera supprimée de la page.
Ces trois options vont placer un break point (point d’arrêt) qui vous emmènera directement à la ligne du fichier js qui exécute le truc qui pose problème. Les break point ont pour effet de mettre tout le js en “pause” pour pouvoir y étudier les valeurs des variables au moment de la mise en pause.
Je vous dis pas le temps que ça va me faire gagner quand je debug du JS ! Et pour info ça marche aussi dans Firebug ^^
Ces trois lignes que ça fait 1000 ans que je me dis qu’un jour je prendrai cinq minutes pour comprendre à quoi elles servent… c’est fait !
Merci. 😀
Cool ! ^^
Excuse moi mais après avoir placé les breakpoints tu relance le chargement de la page?
Quand je le fais les breakpoints disparaissent et le process ne s’arrête pas dessus xS
Si tu pouvais répondre ce serait sympa 🙂 Merci
Hello oui c’est ça tu active ton/tes breakpoint puis tu relance ta recherche. Ça marche bien chez moi. Tu utilise quelle version de Chrome ? ou alors tu utilise Firefox ?
C’est Patrick Swayze qui aurait été content en tout cas.
WTF?