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

Afficher des objets sous forme de tableau

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Un objet ou un tableau est parfois très compliqué à lire. Découvrez une méthode simple pour obtenir un tableau propre dans la console.
03:31

Transcription

Dans un souci de debug vraiment efficace, il va souvent vous falloir vérifier ce qui se trouve dans une collection, par exemple. On va prendre ici comme exemple le « this.todos » qu'on a là et vous allez avoir envie de voir ce qui se trouve dedans. La plupart du temps on fera ça : on fera juste un petit « console.log(this.todos) ». Je vous rassure, c'est ce que tout le monde fait. Vous allez voir qu'il y a beaucoup plus efficace que ça. Si je fais ça, effectivement, je vais bien me retrouver avec ma liste d'objets, que je vais pouvoir parcourir, etc. Imaginez avec un très gros objet. Si on a doit retrouver quelque chose dedans et ouvrir tous les enfants, ça risque d'être très long. Il existe une méthode très simple pour afficher les informations provenant d'une collection de façon beaucoup plus claire dans la console. C'est « table ». En faisant un « console.table », vous allez avoir un tableau de chacun de vos objets avec des colonnes propres qui vont correspondre aux différentes valeurs que vous allez avoir dedans. Donc ça va être avec les valeurs de chacun de vos objets. Regardez le rendu. Beaucoup plus simple, beaucoup plus rapide pour trouver de l'information. Et surtout, ça va être utilisable avec le moteur de recherche. Pour accéder au moteur de recherche, vous faites un « CTRL+F » ou un « Pomme+F » si vous êtes sur OSX et vous allez voir qu'ici on peut trouver de l'information très simplement. Par exemple avec une chaîne de caractères, il va essayer de rechercher partout dans le tableau. Quand vous avez besoin de chercher de l'info, faites un affichage sous forme de tableau. Attention, ça va bien afficher les objets qui se trouvent dans une collection, mais vous ne pourrez pas utiliser le tableau avec un seul objet qui se trouve dans la collection. Si je fais ça, ça ne va pas fonctionner. Je ne vais rien avoir en affichage. Pour cette méthode-là, vous n'aurez pas le choix, ce sera « console.log » qui vous permettra d'afficher l'objet. Le « console.log » sur un objet, c'est quand même intéressant, même si on n'a pas un affichage tableau, ce qui n'est pas utile pour un objet. On a tout de même toutes les informations qui vont être définies à la suite. N'hésitez pas à faire ça pour trouver de l'information et pour trouver une valeur à l'intérieur d'une opération, c'est possible de faire comme ça et d'utiliser le « console.log » sur un seul objet. Si vous devez utiliser la recherche dans une collection complète, je le répète : faites « console.table ». Vous allez avoir un affichage sous forme de tableau qui est beaucoup plus simple pour travailler avec des grosses collections. Ce qui est intéressant en plus de ça, c'est qu'on pourrait le câbler au moment où on va rajouter une info. Comme ça, à chaque qu'on va rajouter une info, ça viendrait l'afficher. Vous pouvez, sans problème, recharger la page, si vous l'avez câblé il va se recharger automatiquement. Ce qui est bien, c'est que ça vous donne quand même en-dessous, même si on a le tableau, aussi accès directement au tableau pour qu'on puisse aller parcourir le tableau sans aucun problème. C'est bien parce que c'est une double solution : un affichage sous forme de tableau et en plus de ça, la collection en-dessous que l'on peut venir travailler nous-même. Attention, dernier petit point : on ne peut pas modifier les valeurs directement dans le tableau, ça ne marche pas. On ne peut pas le faire non plus ici. Si vous le faites là, ça ne va pas le modifier ici bien-sûr mais, par contre, vous aurez bien de l'information qui sera modifiée et quand vous allez recharger, malheureusement, ça va partir parce que ça ne vous permet que de travailler sur les valeurs qui sont ici. Ça n'a aucune incidence avec le script en cours, c'est simplement pour des besoins de debug et pour des besoins de travail sur les valeurs mais ça n'aura aucun impact sur le code.

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 !