La console JavaScript est une fenêtre d'outils variés mais très puissants que tous les navigateurs modernes proposent aujourd'hui.
Par défaut, on parle de console JavaScript, mais la console donne en fait accès à d'innombrables fonctionnalités, détaillées dans le dernier chapitre de cette page. Certains navigateurs nomment donc cette fonctionnalité comme la fenêtre Outils de développements.
Chaque navigateur a une interface légèrement différente. J'ai choisi mon outil favori (Chrome sur Mac) pour les captures d'écran.
L'intérêt de la console est limité aux développeurs web. Son accès est donc souvent un peu complexe et dépend des navigateurs. Une combinaison de 3 touches suffit pourtant à l'appeler. Voici les différentes combinaisons suivant le navigateur et le système d'exploitation.
Entrez la combinaison de touches ⌘ + ⌥ + J pour Chrome
Entrez la combinaison de touches ⌘ + ⌥ + C pour Safari
Entrez la combinaison de touches ctrl + maj + I pour les navigateurs Chrome, Firefox et Safari
Tapez la touche F12 pour Internet Explorer et Edge
Voici le rendu de la console à l'ouverture :
L'onglet console affiche les erreurs JavaScript et les ressources en ligne non trouvées. Il s'agit des fameuses erreurs 404.
Une barre de filtre permet de rechercher des éléments de la console par du texte et de sélectionner le niveau de gravité des erreurs affichées.
Le bouton 
vide le contenu de la console.
La console est également interactive et permet au développeur de taper des commandes JS et de voir le résultat au sein de la page.
Après chaque appel javascript, la console exécute le code et en affiche le résultat. Si le résultat est une chaîne de caractères ou un nombre, une seule ligne est affichée. Si le résultat est un objet javascript, comme ici le tableau [1,2,3,4], la console l'affiche de manière interactive et ergonomique
Il est possible d'écrire dans la console pendant l'exécution des scripts de votre page. C'est très pratique pour suivre son comportement, les valeurs des variables, y compris les tableaux ou les objets.
var monTableau=new Array(10, 20, 30, 40);
console.log("Une chaîne de caractères");
console.log(Math.PI);
console.log(monTableau);
console.table(monTableau);
L'ensemble des exemples des tutoriaux du site ont un émulateur de la console qui permet de voir le rendu sans avoir à ouvrir la console du navigateur.
Historiquement, les développeurs affichaient des informations de leur code avec les messages d'alerte (via la méthode alert()) qui sont bloquants et intrusifs. L'affichage dans la console est bien plus puissant et sans aucune gêne à l'usage.
Attention, sur certains navigateurs anciens, l'objet console n'est pas connu et déclenche une erreur avec parfois l'arrêt de la suite de vos scripts. Il n'est donc pas recommandé de conserver les appels de console une fois en ligne.
Tout savoir sur l'objet console et ses fonctionnalités
Le bouton 
permet de trouver un élément de la page, sa position dans le code HTML et ses paramètres CSS
Voici l'onglet Elements de la console :
L'onglet Network de la console affiche l'ensemble des appels au réseau réalisé, avec une timeline chronologique.
Le bouton 
modifie l'affichage en mode mobile, avec une liste d'appareils et de résolutions préconfigurées
Voici le rendu en mode iPhone 6 du site:
Les consoles sont devenues de véritables outils multifonctions très puissants qu'il est possible de configurer finement selon ses préférences et ses besoins. Elles doivent devenir un réflexe pour tous les développeurs web.
Lire aussi le tutorial sur les erreurs fréquentes en javascript
En savoir plus