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

Découvrir les sorties en console

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il existe une multitude de sorties possibles avec la console. Initiez-vous aux meilleures techniques pour obtenir de l'information visuelle.
06:40

Transcription

Vous connaissez très certainement les sorties les plus simples. Le « console.log », que tout le monde connaît et qu'on va utiliser souvent pour avoir un message. On va display un message en console et ce message va être affiché directement dans la console. C'est très intéressant quand on va vouloir analyser un code pour savoir exactement ce qu'il est en train de faire. On va essayer ensemble. On va aller récupérer le fichier qui nous intéresse, c'est-à-dire « app.js », et venir ici câbler de l'information. On voit qu'il y a beaucoup de possibilités et il y a beaucoup de choses qui sont faites à l'intérieur de notre fonction. Il y a notamment des insertions. On a ici un « new-todo keyup » qui est un « footer click » qui va faire un « clear-completed ». Un qui est un « todo-list change » qui va faire un « toggle » quelque part. On sait que tout ça va fonctionner sur des événements. J'ai envie de traquer ce qui va se passer. Je sais que j'ai « new-todo », vous voyez ici mon élément, qui est un événement « keyup », et qui me permet de savoir que je vais ajouter quelque chose. Par exemple, je vais ajouter une tâche ici et je vais appuyer sur « Entrer ». Ça va l'ajouter. Mais qui fait ça ? Comment je fais pour savoir qui est celui qui va faire ça ? Je vais utiliser le « console.log », tout simplement. Je sais que le « console.log » va me permettre d'afficher des informations et de savoir à quel endroit ça se fait. Je sais que j'ai aussi une fonction « Create » ici. Je vais donc ajouter un « console.log » à cet endroit-là et je vais lui mettre « Tâche créée ». En faisant ça, on va simplement se rendre dans le navigateur, on va recommencer, on va ajouter quelque chose et on voit qu'il ne se passe rien. Le « console.log » ne se déclenche pas. Pourquoi il ne se déclenche pas ? Parce qu'ici on a un code source, mais il faut faire très attention parce que, bien souvent, le navigateur va conserver l'information. Vous serez obligés de nettoyer, de vider votre cache, Si vous avez envie de continuer à utiliser le site pour pouvoir le tester. Pensez à ça, pensez à effacer les données de navigation, Vous allez effacer les données de navigation et recharger. Regardez, à chaque que je vais ajouter, on voit qu'ici il se passe quelque chose, « Tâche créée ». Là j'ai bien des informations qui passent. C'est intéressant, on sait que sur le « keyup », c'est en train de travailler. On sait qu'à chaque fois qu'on va lâcher la touche, « keyup », il va y avoir quelque chose qui va se passer. Effectivement, ici, on a bien un comportement. Ça, ça vous permet de traquer ce qui se passe. Il y a des choses que vous ne connaissez peut-être pas. On n'a pas que le « console.log », on a aussi le « console.error ». Celui-ci va vous permettre d'afficher un message. On va simplement mettre « Erreur», comme ça, pour que vous puissiez voir ce que ça donne. On va recharger la page, et vous verrez qu'ici, maintenant, c'est une erreur. Ce qui passe, ce n'est plus directement un message en console, mais c'est une erreur. Ça permet d'attirer l'attention d'un développeur sur une potentielle erreur dans le code. Je vous conseille de l'utiliser de temps en temps, ça peut être utile. On n'a pas que ça. On a « console.log », on a « console.error », mais on en a d'autres. Vous les avez en autocomplétion. C'est plutôt intéressant. Quand vous allez récupérer comme ça, vous verrez que vous avez tout ce qui existe ici. Notamment « console.debug ». On le verra un petit peu plus tard, il est très intéressant. On peut aussi afficher ici un message, qui sera display un peu différemment, encore une fois. On a un message qui paraît en bleu. Ça vous permet d'avoir des niveaux de log, des niveaux de sortie, qui seront vraiment intéressants, dans un code source, pour se repérer. Je vous en montre un dernier qui est absolument génial. Celui-là, comment il va fonctionner ? Tout simplement avec un groupement. Vous allez pouvoir démarrer un groupe. Par exemple ici, le groupe qu'on va démarrer, on va le mettre au niveau du « Create », et on va simplement lui dire que c'est « Active keyup », À chaque fois qu'il y a un « keyup » qui va être effectué, on va lui afficher un message, donc « console.log » et on va simplement lui mettre « keyup ». J'aimerais aussi pouvoir, à la fin, avoir, quand je vais appuyer sur « Entrer », quelque chose qui s'effectuer, qui va me permettre de savoir que ça a été ajouté. À la fin, n'oubliez pas de faire ici un « groupEnd », vous êtes obligés, si vous voulez finir le groupe. Bien-sûr, à l'intérieur, vous allez mettre ce que vous voulez. On voit qu'ici il se passe des choses, là on a une variable « e ». On a une condition ici, qui est définie. Cette condition va ajouter à l'intérieur, si jamais il y a une touche qui est définie et qui est une touche qui permet d'ajouter. Là, on a bien un « todos.push ». À cet endroit-là, vous pourriez juste ajouter un « Todo added ». Attention, il faut mettre un « && », sinon ça ne marchera pas. Quand vous aurez fait ça, vous allez recharger, et vous allez avoir quelque chose qui apparaît. Une fois que vous allez appuyer sur « Entrer », votre groupe va démarrer, mais votre groupe va comporter deux actions. On voit qu'ici on a une fonctionnalité en plus qui est l'affichage, dans le groupe, d'une action effectuée. Ça vous permet de faire des groupements d'actions pour avoir, à chaque fois, quel est l'événement qui part et quelles sont les actions réalisées à l'intérieur. Quand c'est juste l'appui d'une touche, c'est juste un « keyup « qui passe. Mais si je fais « Entrer », il y a bien un « keyup », mais il y a aussi le « Todo added » qui passe, ce qui me permet de savoir que mon « Todo » a été ajouté à la liste. Ce sont des petites chose à savoir, quand vous allez travailler avec la console pour faire des displays d'informations. Vous devez connaître ce groupe qui permet de démarrer un groupe d'action, de faire des choses à l'intérieur et de le terminer à la fin. Vous pourriez ne pas le terminer ici, ça dépend de la constitution de votre code. Vous pouvez avoir un « console.groupEnd » vraiment à la fin d'une fonctionnalité qui vous permet de démarrer un groupe et d'avoir des informations sur ce qui se passe à l'intérieur de ce groupe. Ici c'est vrai que, par rapport à ce qu'on a au niveau du code, c'est pas forcément évident. Mais pensez-y. Le groupement d'informations vous permet de démarrer des groupes que vous pouvez, en plus, refermer pour la lisibilité, quand vous en avez besoin. Ça peut être des gros groupes d'actions, qui viennent tester toute une fonctionnalité. C'est vraiment sympa. Ça vous permet d'avoir des informations console qui sont beaucoup plus claires que juste des messages de log, sachant qu'à l'intérieur ici vous pourriez mettre tout ce que vous voulez. Quand il y a des erreurs, du debug, du log, vous allez là les outils en main pour pouvoir travailler proprement vos sorties en console.

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 !