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

Utiliser la console JavaScript de Chrome

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La console de Chrome est le meilleur outil pour déboguer, mais elle est souvent mal utilisée. Apprenez ici à maîtriser cette console.
04:14

Transcription

On va maintenant parler de la console de Chrome. Est-ce que vous la connaissez bien cette console ? Vous devriez parce qu’un développeur JavaScript se doit de connaitre parfaitement cette console. Et vous allez voir tout ce qui est possible de faire dans cette console. On va d’abord l’ouvrir. On va aller la chercher dans « Plus d’outils » ici et puis on va demander les outils développeurs. Vous verrez effectivement qu'en face, on a un raccourci clavier que vous pouvez utiliser pour ouvrir ou fermer la console. Ça marche très, très bien il n’y a aucun problème mais vous pouvez aussi aller chercher par le menu. On a plusieurs éléments et plusieurs onglets qui sont intéressants. D’abord on a le panneau « Elements ». Il va vous permettre de vous balader à l’intérieur comme ça de votre code et surtout des différents éléments que vous avez à l’intérieur. Ce qui est bien, c’est qu’on peut directement les sélectionner et bien évidemment on peut travailler avec puisque sur le côté à droite, on peut changer les styles et puis ici, on peut carrément double-cliquer pour venir modifier le contenu directement dans le panneau. Et puis surtout, on a une console. Alors cette console, elle est géniale parce qu’en fait vous avez déjà l’environnement ici, JavaScript. Ça veut dire que concrètement, à cet endroit-là, quand je vais faire « window » comme ça, je vais me retrouver tout de suite avec les différents éléments JavaScript. Et en fait je retrouve tout mon environnement JavaScript et je peux travailler avec tout. Je peux travailler avec les événements, les objets, récupérer des infos. Il y a aussi une option de jQuery qui est à l’intérieur. Alors si vous avez installé jQuery sur votre site, le « $ » correspondra à jQuery, sinon c’est déjà prévu dans la console. On peut déjà travailler avec les éléments et les récupérer facilement comme ça. Autre chose de très intéressant : alors on va ici pouvoir vider la console avec le petit bouton « clear » mais on peut aussi tout à fait taper « clear » comme ça et faire « Entrée » et ça va nettoyer la console, ça ce n’est pas un problème. Vous pouvez aussi faire un « Preserve log ». Ça c’est très important, gardez-le à l’esprit. Ça veut dire que quand vous avez débuggé un site en fonction des rechargements, etc. ça va vider la console. Vous pouvez préserver, eh bien, les informations en console tout au long de votre navigation, sans avoir à la vider. C'est-à-dire que vous pouvez tout garder même si vous rechargez la page. On va avoir autre chose de très intéressant aussi. Vous avez à l’intérieur de la console, trois petits points ici, qu’on peut aller chercher. Et vous pouvez demander le « console drawer ». Et ici, vous pouvez ajouter des onglets. Alors, il y en a pas mal qui existent, notamment les « rendering », les conditions du réseau qu’on peut fixer soi-même. On pourrait vouloir mettre des conditions différentes. Mais on a surtout un panneau très intéressant qui s’appelle « Search », qui va vous permettre dans tous vos fichiers, de faire des recherches. Donc c’est un espèce de moteur de recherche dans les fichiers du projet qui vous permet de trouver très rapidement des informations, par exemple le mot « dom ». Le terme « dom », vous allez le retrouver dans l’index, dans le fichier « app.js » dans « node_module », « jquery.js », etc., etc. Et ça vous permet tout de suite de travailler sur le fichier car en cliquant sur une ligne de la recherche vous allez basculer sur l’onglet des sources, directement sur le fichier qui vous intéresse, à la ligne qui vous intéresse. Pensez-y. Ça peut dans certains cas être très utile quand on travaille en console d’aller chercher des informations sans avoir à retourner à chaque fois dans l’éditeur pour faire une recherche. Vous avez tout à disposition, dans la console directement. C’est vraiment un outil extrêmement intéressant. Vous allez pouvoir faire tout un tas de choses dans la console, donc beaucoup de sorties ici pour faire du « debug » notamment. Mais vous pouvez aussi taper directement du JavaScript et l’exécuter tout de suite, ce n’est pas un problème non plus. Par exemple, si j’ai envie de récupérer un élément jQuery, je peux tout à fait me dire que ok, cet élément-là, c’est un « h1 » qui se trouve dans « header », donc on sait que dans le « header » qui a un ID « header » on a un « h1 » et on peut le récupérer très facilement en venant le taper ici en jQuery, qu’on sait que c’est un « header » comme ça, qui a, on l’a dit, un ID qui s’appelle « header » aussi. Donc on peut aller récupérer l’ID, comme ça, « header » et chercher le « h1 » qui se trouve dedans. On va fermer, c’est une « string ». On va valider et là on le récupère en jQuery et on peut tout de suite le manipuler sans aucun problème. Donc je pourrais lui appliquer par exemple ici, un « .text » et mettre ce que je veux dedans, « youpi » par exemple et j’applique et je change automatiquement tout de suite directement. Donc là je peux recharger aussi pour retrouver le code chargé dès le départ. Pensez à cette console, c’est votre principal outil. Maintenant on va voir tout ce qui est possible de faire avec et bien évidemment vous allez voir que c’est vraiment pleins de possibilités pour nous développeurs et pour faire du « debug » essentiellement.

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 !