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

Mesurer le code

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Afin d'obtenir des métriques, il existe des outils qui mesurent le code source. Dans cette séquence, apprenez à les utiliser.
04:14

Transcription

Alors, je vais vous parler de deux outils. Je vais vous parler d’« istanbul » qui vous permet d’avoir un « code coverage », c'est-à-dire à combien de pourcentages votre code est couvert. Et je vais vous parler également de « plato ». C’est de la visualisation de code avec de l’analyse statique et de complexité. Donc ça c’est vraiment bien quand on arrive sur un projet aussi et qu’on ne le connait pas, de faire tourner ces outils-là. Alors attention cependant, parce qu’« istanbul » en fait, va se baser sur des tests. Donc il faut avoir des tests unitaires ou fonctionnels, et ça on en reparlera plus tard. Donc « istanbul », on va le laisser de côté pour le moment. Sachez par contre que ça existe et « istanbul » va vous permettre d’avoir des métriques sur ce que vous avez couvert ou pas. Alors on peut essayer de l’utiliser si on le veut, mais on va avoir quelques petits problèmes notamment avec notre projet parce que nous, c’est « App.js » qu’on va vouloir en fait étudier. Et comme pour le moment, « App.js », il y a un « jQuery » mais c’est un « jQuery » en fonction anonyme. C’est ce que vous avez dans le code, c'est-à-dire qu’ici, si on va dans « js », et qu’on prend le « app.js » qu’on a là, on voit qu’on a des petits problèmes parce que voilà, on vient imbriquer dans « jQuery » l’exécution de la fonction. Et ça, ça peut poser quelques petits problèmes. Cela dit, on pourrait tout à fait venir l’utiliser. Alors l’installation, ça va se faire par « npm ». Je vous laisserais le faire, c’est assez simple. Vous avez compris le principe, c’est du « -g ». Donc on n’oublie pas « sudo ». Et pour « plato », c’est la même chose. L’installation se fait via « npm ». Donc c’est la même chose, on va aussi utiliser « npm install –g plato ». Quand vous aurez les deux outils en place, alors pour « istanbul », c’est assez simple, on va simplement lui dire : « istanbul cover » et on va lui donner ici ce qu’on veut. Donc on va aller dans « Sites » et dans notre site à nous, donc « todo ». Et on va lui dire : « istanbul cover » et on va lui donner le « js/app.js ». Donc là vous allez voir que vous allez avoir quelques petits messages d'erreur, notamment « jQuery is not defined ». Ce qui est tout à fait normal. Par contre vous allez vous retrouver et ici c’est intéressant, avec un dossier de « coverage » que vous avez là. Alors, le « coverage » que vous avez là, il ne s’utilise pas forcément de base comme ça. Mais vous pouvez, sans aucun problème, l’utiliser quand même. Alors, dans votre dossier ici, vous allez avoir le dossier « coverage », « icov-report ». Et puis on peut ouvrir l’index. Vous allez voir qu’effectivement, sur « js », sur « app », là vous allez avoir tout le « coverage » et on se rend compte qu’il y a pas de commentaire quasiment. Et donc comme il y a pas de commentaires, on a un « coverage » très, très bas. Donc ça c’est intéressant, ça vous permet de savoir si du code est commenté ou pas. Alors pour « plato », vous allez voir que ce n’est pas mal aussi « plato ». Donc pour l’utiliser, vous allez simplement lui demander par exemple de faire un rapport sur un dossier complet. Donc nous le dossier, ça va être le dossier qui s’appelle « js ». Donc on va simplement coller ça et on va lui demander le dossier « js ». Il va lancer sa commande et vous vous retrouverez de la même manière que pour l’autre ici, avec un dossier qui s’appelle « report ». Donc « coverage », dans le cas d’« istanbul » et puis « report » dans le cas de « plato ». Si vous allez dans « report », vous allez également avoir un « index.html » que l’on va pouvoir ouvrir et celui-ci vous donnera l’analyse de votre code source. Et là, on obtient énormément d’informations, notamment le nombre, eh bien de lignes, la maintenabilité, une note de maintenabilité. Donc plus elle est haute et plus c’est intéressant. C'est-à-dire que notre code est très maintenable, pour le coup à 74. Ensuite, en descendant un petit peu, on a ici la maintenabilité par fichier. Donc ça c’est pour le projet et ça c’est par fichier quand vous en avez plusieurs. Le nombre de lignes de code, c’est intéressant à voir. Le nombre d’erreurs d’implémentation, donc ça c’est estimé évidemment. Et puis ensuite, le nombre d’erreurs de « lint ». Donc là, vous avez vraiment beaucoup, beaucoup d’infos. Ensuite, vous pouvez vous rendre sur un fichier en particulier pour voir sa complexité, pour voir les « SLOC » et pour voir surtout quels sont problèmes qui peuvent être causés et par quelle fonctionnalité. Donc à chaque fois, vous pouvez aller sur les différentes fonctionnalités pour voir ce qui se passe, connaitre la complexité, connaitre la longueur, connaitre la difficulté, etc., etc. Donc beaucoup d’informations, d’estimations qu’on va pouvoir utiliser sur un projet pour connaître la complexité du projet avant même de commencer à toucher aux différents fichiers. Donc ça c’est vraiment bien, c’est un vrai outil qui vous permet de faire de l’analyse de code statique et d’avoir déjà quelques informations sur un projet. Utilisez-le parce que ça, vous en aurez besoin. Ça fait partie du bagage, ça fait partie des outils développeurs quand on va faire de l’analyse de code, quand on va faire du « debug ».

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 !