La console de développement web

s1 ----------

Voici des éléments concernant un outil utile pour déboguer vos développements.

s2 ----------

Lorsque l'on teste dans un navigateur une animation en cours de développement, elle n'a pas
toujours du premier coup le comportement souhaité. Un bug s'est peut-être produit et l'on se pose la
question de savoir comment le résoudre ?
On peut distinguer deux types de bugs : les fautes de syntaxe et les erreurs logiques dans un
algorithme.
Pour ces deux types de bugs, on peut utiliser un ensemble d'outils de développement intégrés au
navigateur. Nous ne détaillerons pas ici tous ces outils, mais ceux qui dans l'immédiat vous seront
les plus utiles :
• la console d'erreurs,
• le débogueur,
• l'inspecteur.

s3 ----------

Commençons par la console.

On ouvre la console, par exemple avec Firefox sous Mac/OS, en faisant Outils > Développeur web
> Console web. Sur un Mac, on peut utiliser le raccourci Cmd-Option-K ; sur une machine
Windows, ce sera Ctrl-Shift-K.

Voyons très rapidement comment l'utiliser à travers quelques exemples que je vous propose de
réaliser à partir de fichiers déjà écrits et contenant des erreurs.

Que fait cette console ?

Tout d'abord, elle affiche les erreurs et les avertissements associés aux requêtes réseau et à
l'exécution du code JavaScript dans une page ainsi que les messages d'information qui lui sont
explicitement transmis par le code JavaScript de la page grâce à l'instruction console.log

Ensuite, elle permet d'interagir avec la page web. Comment ? En vous donnant la possibilité d'écrire
et d'exécuter du code JavaScript supplémentaire pendant que cette page s'affiche.

La Console Web a trois parties : de haut en bas, on trouve

• une barre d'outils avec des boutons "Réseau", "CSS, "JS"... Cette barre d'outils sert à filtrer
les messages affichés ;
• le panneau d'affichage des messages ;
• une ligne de commande qui sert à exécuter du code JavaScript.

Pour la suite, je vous propose de télécharger le fichier zip donné dans la page du module et de le

Introduction à HTML5 – Animations et Jeux 1/4

décompresser. Ce dossier contient trois fichiers ; attention ces fichiers contiennent volontairement
des erreurs que nous allons corriger progressivement ; ouvrez tel quel le fichier index.html avec
Firefox !

s4 ----------

Ouvrez la console web et s'il n'est pas grisé, cliquez sur le bouton console web, puis choisissez de
filtrer les messages de type réseau.

Rechargez la page !

Nous avons ici l'exemple d'un fichier CSS que la page HTML essaie de charger, mais qui n'existe
pas ou dont le nom est mal orthographié.

La console web - à condition de filtrer les messages en cliquant sur le bouton Réseau - détecte cette
erreur.

Pour ceux qui travaillent avec un Mac, la console du navigateur Safari est même encore plus
explicite.

Vidons la console et corrigeons cette erreur : le fichier CSS présent s'appelle style2.css donc soit on
le renomme en styles.css (avec un « s »), soit on corrige la balise link du fichier HTML.

s5 ----------

Imaginons maintenant que le fichier CSS lié à la page HTML contienne l'instruction suivante où la
propriété background a été mal orthographiée.

La console web - à condition de filtrer les messages en cliquant sur le bouton CSS - détecte cette
erreur et indique dans quel fichier CSS et à quelle ligne elle se produit.

Si vous cliquez sur le lien styles.css sur la droite du panneau d'affichage, l'Editeur de styles s'ouvre
et vous pouvez corriger en direct cette erreur et enregistrer cette modification. Vous voyez que le
fond de la page prend aussitôt la couleur choisie : un gris très clair.

Vidons la console et corrigeons cette erreur.

s6 ----------

Supposons qu'il existe une erreur de syntaxe dans le fichier code.js : on souhaite écrire
document.getElementById, mais on écrit documen.getElementById - sans le « t » de document. La
console web - à condition de filtrer les messages en cliquant sur le bouton JS - détecte cette erreur
de syntaxe JavaScript et indique sur la droite du panneau d'affichage la ligne où elle se produit.

On pourrait choisir de cliquer sur le lien code.js et ouvrir l'onglet Débogueur. Mais nous allons
découvrir cet outil un peu plus loin.

Vidons la console et corrigeons cette erreur.

Les erreurs de syntaxe sont les plus faciles à détecter !

Introduction à HTML5 – Animations et Jeux 2/4

s7 ----------

Prenons l'exemple d'une erreur d'algorithme et essayons de la traiter grâce à la ligne de commande
fournie avec la Console Web.

Cette ligne de commande nous permet d'accéder aux variables définies dans la page, aussi bien les
variables par défaut comme document, que les variables ajoutées par le code JavaScript. On peut
aussi y écrire des instructions JavaScript complètes.

Dans le code JavaScript présenté, on cherche à afficher le contenu du tableau tableauPays. Il n'y a
pas d'erreur à l'affichage de la page, mais on voit qu'il manque un élément dans ce qui est affiché.
Imaginons que la relecture du code ne nous permette pas de voir que l'on définit deux fois l'élément
tableauPays[2] et que, par conséquent, tableauPays[1] n'est pas défini.

On écrit tableauPays dans la ligne de commande, la console affiche qu'il s'agit d'un objet de type
Array ; si l'on clique sur ce lien, on affiche ses propriétés et l'on a une meilleure chance de
comprendre que l'élément tableauPays[1] manque.

Vidons la console.

s8 ----------

Une autre fonctionnalité intéressante de la console est l'inspecteur.

Prenons l'exemple du code ci-dessous.

On affiche la page et on choisit d'utiliser l'inspecteur. Dans la console s'affiche la structure de la

page. Si l'on déplie les éléments et si l'on sélectionne par exemple le premier élément div (qui porte
l'identifiant titre), on peut accéder à toutes les informations de style sur cet élément, ce qui peut être
très utile à un moment de l'exécution, lorsqu'une partie de ces styles est définie dynamiquement à
travers JavaScript, comme c'est le cas dans cet exemple pour la propriété backgroundColor de
l'élément titre.

s9 ----------

Voyons enfin le débogueur.

Le débogueur est très utile pour suivre pas à pas l'évolution du code et des variables.

Ouvrons l'onglet débogueur de la console. Dans la partie gauche de la console, on choisit le fichier
JavaScript que l'on souhaite examiner. Dans notre exemple, un seul fichier : code.js.

Si l'on clique dans la marge de la zone où se trouve le code (au niveau des numéros de ligne) on fait
apparaître un petit point bleu. C'est un point d'arrêt. On peut en définir plusieurs, notamment dans
les endroits du code où l'on suspecte un problème. Si l'on recharge la page, l'exécution s'arrête au
premier point d'arrêt rencontré et l'on pourra examiner la valeur de toutes les variables présentes à
ce moment de l'exécution, puis pas à pas, ligne de code après ligne de code ou de point d'arrêt en
point d'arrêt poursuivre son exécution.

Introduction à HTML5 – Animations et Jeux 3/4

Je vous propose de cliquer en regard de la ligne 4, puis de recharger la page : l'exécution s'arrête à
cet endroit ; le navigateur est en pause ; on remarque que le titre n'est pas encore affiché puisque
l'exécution du code s'est arrêtée avant.

Dans la droite de la console, une nouvelle partie vient de s'ouvrir : elle nous donne accès à toutes les
variables utilisées par l'animation ; ce qui nous intéresse ici c'est par exemple de vérifier que
tableauPays est correctement créé. Pour ce faire, on tape tableauPays dans l'expression-espionne et
on appuie sur la touche Entrée du clavier. À ce stade tableauPays existe bien, mais ne contient pas
d'élément.

On peut choisir de poursuivre l'exécution jusqu'au prochain point d'arrêt (s'il en existe un), mais
aussi de s'arrêter à la prochaine ligne de code. Si cette ligne contient une fonction JavaScript, on
peut choisir également d'entrer dans cette fonction comme de sauter directement à l'issue de cette
fonction.

On vérifie bien de cette façon que tableauPays n'est pas complet.

Cette façon de faire est bien plus efficace - on s'en doute - que d'afficher les valeurs d'une variable à
chaque ligne par des alertes JavaScript ou de fouiller interminablement un code des yeux afin de
trouver l'erreur !

s10 ----------

Je vous propose de vous familiariser avec ces premiers outils à l'occasion des exercices de cette
semaine et des suivantes.

Les autres fonctionnalités de la console sont moins critiques à ce stade du cours. Vous trouverez
dans ce MOOC des liens pour approfondir ultérieurement l'utilisation de l'éditeur de styles et du
profileur, notamment.

Introduction à HTML5 – Animations et Jeux 4/4