Retourner  la page d'accueil de TJS

La console javascript pour coder comme un pro

A quoi sert la console ?

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.

Comment ouvrir la console de votre navigateur ?

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 suivants le navigateur et le système d'exploitation.

Ouvrir la console sur Mac

Entrez la combinaison de touches ⌘ + ⌥ + J pour Chrome
Entrez la combinaison de touches ⌘ + ⌥ + C pour Safari

Ouvrir la console sur Windows

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 :
Ouverture de la console javascript - Toutjavascript.com


L'onglet console

L'onglet console affiche les erreurs javascripts 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.

Filtre de la console javascript - Toutjavascript.com

Le bouton vider la console - Toutjavascript.com vide le contenu de la console.

Interactivité dans la page

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.
Exemples de code Javascript dans la console - Toutjavascript.com

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

La console dans le corps de page

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

		console.log("Chaîne de caractères");
		console.log(monTableau);
	
L'appel de la méthode log() (qui signifie journal) affiche dans la console l'objet passé en paramètre.

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


Aperçu des autres onglets

L'accès aux élements du DOM

Le bouton Inspecter les éléments - Toutjavascript.com 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 :
Onglet Elements de la console - Toutjavascript.com

L'historique des appels réseaux

L'onglet Network de la console affiche l'ensemble des appels au réseau réalisé, avec une timeline chronologique.
Onglet Network de la console - Toutjavascript.com

Le mode responsive mobile

Le bouton Passer en mode mobile - Toutjavascript.com 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:
Mode mobile grâce à la console - Toutjavascript.com

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

Chercher une fonction, un objet, ...

Le 23/08/2017 10:07:19 sur php7 en 10.81 ms