Cours 3.3. Console.log

Developer tools

La majorité des navigateurs contemporains intégrent une section developer tools (outils de développement). Vous pouvez généralement y accéder avec un clic droit puis le menu Inspecter. Il existe aussi des racourcis relativement standards entre les navigateurs :

F12
Ctrl + Shift + i
Ctrl + Shift + j

Si aucune des solutions ci-dessus ne fonctionne, il faudra rechercher sur Internet ou dans les menus de votre navigateur pour trouver comment y accéder.

Exercice : les outils de développement contiennent une console qui est très utilisée en JavaScript. J'ai programmé un message qui doit s'afficher dans la console de cette page. Ouvrez la console et trouvez mon message.

Remarque : les outils de développement, en particulier la console, sont des outils à destination des développeurs. Ils sont relativement puissants et permettent d'accéder à différentes informations de la page, notamment des informations personnelles. Ils permettent également d'accéder et de modifier le contenu des pages (évidemment uniquement dans le navigateur, pas sur le serveur). Si vous ouvrez la console sur Facebook, voila ce qui s'affiche :

Remarque : c'est aussi dans la console que les éventuels messages d'erreur s'affichent.

Écrire dans la console

Quand on développe du code en JavaScript, nous avons souvent besoin d'un retour pour vérifier que le code s'exécute correctement. Pendant les phases de développement, il est possible d'écrire dans la console avec la fonction console.log(). Par exemple :

console.log('Mon premier message dans la console');

Les guillemets stipulent que le message est une chaîne de caractères (autrement dit, du texte). Nous y reviendrons plus tard, mais si l'on souhaite afficher une variable, il ne faut pas mettre les guillemets :

var x = 12;
console.log(x);

Remarque : notez qu'en JavaScript, chaque instruction se termine par un point-virgule (;). Cela indique à l'interpréteur (le moteur JavaScript) que l'instruction est terminée.

Les messages dans la console sont utiles pendant les phases de développement. Lorsque le site est déployé (accessible publiquement), il convient de supprimer ces messages afin :

d'optimiser l'affichage des pages ;
de ne pas poluer la console qui sert aussi aux messages d'erreur ;
et de ne pas donner d'informations aux pirates.

Exercices

Exercice 1

Ouvrez la console de cette page et tapez la ligne suivante. Ne vous inquiétez pas si vous ne comprenez pas cette commande, seul le résultat nous intéresse ici.

document.getElementsByTagName("h1")[0].innerHTML= "J'ai remplacé le titre !"

Regardez le titre en haut de cette page. Que s'est-il passé ?

Exercice 2

Considérons le code HTML suivant :

<html>
  <head>
  </head>
  <body>
    <h1>Message dans la console</h1>

    <!-- Insérez votre code JavaScript ici -->
    <!-- le code doit afficher un message dans la console -->

  </body>
</html>

Ajouter un code en JavaScript qui affiche Hello World ! dans la console grâce à la fonction console.log(). Lorsque ça fonctionne, ajouter une deuxième ligne qui affichera Ça veut dire Bonjour le monde !. Voici un exemple de ce qui devrait s'afficher dans la console :

Do the exercise online

Solution

Quiz

À quoi servent les outils de développement ?

À créer des serveurs web.

À afficher des messages pendant la phase de développement.

À afficher le contenu de variables.

À afficher des messages d'erreur.

Vérifier

Comment se terminent les instructions en JavaScript ?

Par un point .

Par deux points :

Par un point-virgule ;

Il n'y a pas de caractère pour indiquer la fin des instructions.

Vérifier

À quoi servent les guillemets en JavaScript ?

À indiquer le début et la fin du code JavaScript.

À indiquer le début et la fin d'un texte.

À indiquer le début et la fin d'une chaîne de caractères.

À indiquer le début et la fin d'un commentaire.

Vérifier

Pourquoi faut-il supprimer les messages dans la console lors de la publication d'un site ?

Pour optimiser l'affichage des pages.

Pour ne pas faciliter la tâche des hackers.

Pour éviter des confusions avec les messages d'erreur.

Pas besoin de les supprimer, on peut les laisser.

Vérifier

Lesson 3.2 Summary Lesson 3.4

Voir aussi

Dernière mise à jour : 03/10/2022