Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

JavaScript : Le débogage et l'analyse de code

Afficher les évènements d'un objet

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
En JavaScript, les évènements sont innombrables et vous ne savez pas toujours ce qu'entraîne un clic sur un bouton. Voyez comment afficher les évènements avec la console.
02:48

Transcription

Votre compréhension d'un script va également souvent passer par les événements. Vous avez la possibilité de remonter les événements d'un élément HTML dans la page, pour savoir ce qui passe vraiment derrière. Ça va vous permettre de comprendre comment le script fonctionne, donc forcément de comprendre comment le débugger. Regardez ce qui va se passer. Par exemple, je vais aller récupérer le bouton « Actif » qui se trouve ici. Vous êtes sur « Styles » d'habitude, vous allez aller sur « Event Listeners », et vous allez avoir ici tous les événements qui sont attachés à cet élément HTML. À cet endroit-là vous allez avoir des événements « Passive » et des événements qui sont dits « Blocking ». Il y a des événements qui vont juste être levés de façon automatique et d'autres qui vont devoir être levés par quelque chose. Le quelque chose qui nous intéresse ici en l'occurrence c'est le « click ». On voit qu’actuellement au « click », on a une fonction qui se trouve ligne 71 qui va être levée si il y a un « click » sur le bouton. On va aller regarder ce que c'est. On va ouvrir un petit peu plus. On se rend compte que c'est cette partie-là qui part. Qu'est-ce qu'elle fait ? « this.todos = this.getActiveTodos ». On pourrait faire simplement une recherche ici et on verrait que le « getActiveTodos » est utilisé à plusieurs endroits et qu'il est défini à cet endroit-là. On voit que « getActiveTodos » va simplement faire un filtre en fonction de quelque chose. Le « getActiveTodos » qu'on a là va simplement récupérer le filtre actif. Soit on veut tout voir, soit on ne veut voir que les actifs, soit on ne veut voir que ce qui est fait. Si j'en ai une qui est faite, j'en aurai une seule en fait, une seule en active, et deux en tout. Ici ça vous permet de remonter sur le script, d'aller regarder ce qui se passe au niveau du script et de savoir quel est l'événement dans le code qui est appelé. Sur un très gros script c'est beaucoup plus intéressant parce qu'on voit ici les événements que l'on connaît, on n'a qu'un seul fichier. Ça marche dans tout le projet. Ça va aller chercher la fonction dans le projet et ça va vous permettre d'améliorer votre compréhension, et surtout de débugger efficacement. N'hésitez pas à utiliser les « Event Listeners » que vous avez là. Ça fonctionne absolument sur tout. Si je prends le champ qu'on a ici, il a aussi des « Event Listeners », notamment sur « director », et pour le « keyup » sur « app ». On sait que dans « app » il y a une fonction qui est attachée. Cette fonction c'est « Create ». Ça nous permet de savoir que c'est cette fonction-là qui va être déclenchée sur le « keyup ». Ça ne sert à rien d'aller chercher dans le script. Vous avez absolument tout dans la console. N'hésitez pas à vous baser dessus pour bien comprendre et pour avoir une meilleure compréhension du projet et du fonctionnement de chaque élément et de chaque fonctionnalité. Là vous allez avoir tous les liens possibles.

JavaScript : Le débogage et l'analyse de code

Prenez en main les techniques et les outils pour améliorer votre code JavaScript. Découvrez Bower, js-beautify, la console de Chrome, les tests unitaires et fonctionnels, etc.

1h29 (26 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :3 mars 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !