Présentation de la console

La console est comme une ligne de commande intelligente et riche dans DevTools, et est un excellent outil compagnon à utiliser avec d’autres outils. La console offre un moyen puissant de créer des scripts de fonctionnalités, d’inspecter la page web actuelle et de manipuler la page web actuelle à l’aide de JavaScript.

L’outil Console permet d’effectuer plusieurs tâches, qui sont traitées plus en détail dans les articles suivants :

• Recherchez les problèmes pour savoir pourquoi quelque chose ne fonctionne pas dans le projet actuel. Consultez Corriger les erreurs JavaScript signalées dans la console.
• Obtenir des informations sur le projet Web dans le navigateur sous forme de messages de journal. Voir Filtrer les messages de la console.
• Informations de journal dans les scripts à des fins de débogage. Consultez Messages de journal dans l’outil Console.
• Essayez les expressions JavaScript en direct dans un environnement REPL . Voir Exécuter JavaScript dans la console.
• Interagissez avec le projet Web dans le navigateur à l’aide de JavaScript. Consultez Interagir avec le DOM à l’aide de la console.

Vous pouvez ouvrir l’outil Console en haut ou en bas de DevTools ; il est affiché ici dans la partie supérieure, sur la barre d’activité :

La console est affichée ici dans la partie inférieure de DevTools (le panneau Affichage rapide ), avec l’outil Éléments ouvert au-dessus :

Le moyen le plus rapide d’ouvrir directement la console consiste à appuyer sur Ctrl+Maj+J (Windows, Linux) ou Commande+Option+J (macOS).

Les rapports d’erreurs et la console

La console est l’emplacement par défaut où les erreurs de JavaScript et de connectivité sont signalées. Pour plus d’informations, consultez Correction des erreurs JavaScript signalées dans la console.

DevTools fournit des informations détaillées sur l’erreur dans la console :

Rechercher une chaîne de message d’erreur sur le web

Recherchez sur le web les messages d’erreur de votre console , directement à partir de DevTools. Dans la console, de nombreux messages d’erreur affichent une recherche de ce message sur le bouton Web , affichée sous la loupe :

Lorsque vous cliquez sur le bouton Rechercher ce message sur le bouton Web , un nouvel onglet s’ouvre dans le navigateur et affiche les résultats de la recherche pour le message d’erreur :

Inspecter et filtrer les informations de la page web actuelle

Lorsque vous ouvrez DevTools sur une page web, la console peut contenir une grande quantité d’informations. La quantité d’informations devient un problème lorsque vous devez identifier des informations importantes. Pour afficher les informations importantes nécessitant une action, utilisez l’outil Problèmes dans DevTools.

Les problèmes sont progressivement déplacés de la console vers l’outil Problèmes . Toutefois, il existe toujours beaucoup d’informations dans la console, c’est pourquoi il est judicieux de connaître les options de journal et de filtre automatisées dans la console. Pour plus d’informations, voir Filtrer les messages de la console.

DevTools avec une console pleine de messages :

Informations du journal à afficher dans la console

Le cas d’utilisation le plus populaire pour la console est la journalisation des informations de vos scripts à l’aide de la console.log() méthode ou d’autres méthodes similaires.

Exemple de code

// prints the text to the console as  a log message
console.log('This is a log message');

// prints the text to the console as an informational message
console.info('This is some information');

// prints the text to the console as an error message
console.error('This is an error');

// prints the text to the console as a warning
console.warn('This is a warning');

// prints the geometry of the document body as an object
console.log(document.body.getBoundingClientRect());

// prints the geometry of the document body as a table
console.table(document.body.getBoundingClientRect());

// shows a list of technologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technologies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd();

Pour enregistrer les informations à afficher dans la console :

1. Ouvrir la page web de démonstration Exemples de messages de console : journal, info, erreur et avertissement dans une nouvelle fenêtre ou un nouvel onglet.

2. Pour ouvrir la console, appuyez sur Ctrl+Maj+J (Windows, Linux) ou Commande+Option+J (macOS).

   La console affiche les messages résultants qui sont provoqués par le code de démonstration :

   

3. Collez le code ci-dessus dans la console, puis appuyez sur Entrée.

   Si vous recevez un message : Uncaught SyntaxError: Identifier 'technologies' has already been declared:

4. Ouvrez un nouvel onglet ou une nouvelle fenêtre.

5. Pour ouvrir la console, appuyez sur Ctrl+Maj+J (Windows, Linux) ou Commande+Option+J (macOS).

6. Collez le code ci-dessus dans la console, puis appuyez sur Entrée.

De nombreuses méthodes utiles sont disponibles lorsque vous travaillez avec la console. Pour plus d’informations, consultez Messages de journal dans l’outil Console.

Essayer votre JavaScript en direct dans la console

La console n’est pas seulement un endroit pour enregistrer des informations. La console est un environnement REPL . Lorsque vous écrivez du code JavaScript dans la console, le code s’exécute immédiatement. Vous trouverez peut-être utile de tester de nouvelles fonctionnalités JavaScript ou d’effectuer des calculs rapides. Vous bénéficiez également de toutes les fonctionnalités que vous attendez d’un environnement d’édition moderne, telles que la saisie semi-automatique, la mise en surbrillance de la syntaxe et l’historique.

Pour essayer d’exécuter JavaScript dans la console :

1. Ouvrez la console.

2. Tapez 2+2.

La console affiche le résultat de 2+2 Live au fur et à mesure que vous le tapez, en affichant le résultat 4 sur la ligne suivante :

Cette fonction d’évaluation Eager est utile pour déboguer et vérifier que vous ne faites pas d’erreurs dans votre code.

Pour exécuter l’expression JavaScript dans la console et éventuellement afficher un résultat, appuyez sur Entrée. Vous pouvez ensuite écrire le code JavaScript suivant à exécuter dans la console.

Exécution successive de plusieurs lignes de code JavaScript :

Par défaut, vous exécutez du code JavaScript sur une seule ligne. Pour exécuter une ligne, tapez votre JavaScript, puis appuyez sur Entrée. Pour contourner la limitation d’une seule ligne, appuyez sur Maj+Entrée au lieu de Entrée.

Comme pour les autres expériences de ligne de commande, pour accéder à vos commandes JavaScript précédentes, appuyez sur la flèche du haut. La fonctionnalité de saisie semi-automatique de la console est un excellent moyen d’apprendre des méthodes inconnues.

Pour essayer la saisie semi-automatique :

1. Ouvrez la console.
2. Tapez doc.
3. Sélectionnez document dans le menu déroulant.
4. Appuyez sur Tab pour sélectionner document.
5. Tapez .bo.
6. Appuyez sur Tab pour sélectionner document.body.
7. Tapez-en un autre . pour afficher la liste complète des propriétés et méthodes disponibles sur le corps de la page web active.

Pour plus d’informations sur toutes les façons d’utiliser la console, consultez Console en tant qu’environnement JavaScript.

Saisie semi-automatique des expressions JavaScript dans la console :

Interagir avec la page web actuelle dans le navigateur

La console a accès à l’objet Window du navigateur. Vous pouvez écrire des scripts qui interagissent avec la page web actuelle, en lisant les données du DOM et en affectant des données aux éléments DOM.

Lecture à partir de l’arborescence DOM dans la console

Pour utiliser une expression JavaScript pour lire à partir de la page active en lisant un élément sélectionné à partir de l’arborescence DOM :

1. Ouvrez la console.

2. Collez le code suivant dans la console, puis appuyez sur Entrée :

   document.querySelector('h1').innerHTML
   

   Cette expression sélectionne le premier niveau de titre 1 dans le DOM, puis sélectionne le contenu HTML entre les balises de début et de <h1> fin. La console affiche la sortie de l’expression, qui correspond au texte du titre :

   

Vous avez lu à partir de la représentation DOM de la page web, en entrant une expression JavaScript dans la console et en affichant la sortie dans la console.

Écriture dans l’arborescence DOM et la page web à partir de la console

Vous pouvez également modifier la page web rendue, en modifiant le DOM (ou en écrivant dans le DOM), à partir de la console.

Pour modifier la page web rendue :

1. Ouvrez la console.

2. Collez le code suivant dans la console, puis appuyez sur Entrée :

   document.querySelector('h1').innerHTML = 'Rocking the Console';
   

   L’expression JavaScript ci-dessus utilise le = signe pour attribuer une valeur à l’élément DOM sélectionné. La valeur évaluée de l’expression est une chaîne pour un en-tête, dans cet exemple. La valeur de l’expression (la chaîne d’en-tête) s’affiche à la fois dans la console et sur la page web rendue :

   

   Vous avez modifié le titre principal de la page Web en « Rocking the Console ».

Utilisation de l’utilitaire de console $$

Les méthodes de l’utilitaire de console facilitent l’accès à la page web actuelle et sa manipulation.

Par exemple, pour ajouter une bordure verte autour de tous les liens de la page Web actuelle :

1. Ouvrez la console.

2. Collez le code suivant dans la console, puis appuyez sur Entrée :

   $$('a').forEach(a => a.style.border='1px solid lime');
   

   La $$(selector) fonction utilitaire de la console est « Sélecteur de requête tout ». Cette fonction de sélecteur de requête DOM renvoie un tableau de tous les éléments qui correspondent au sélecteur CSS spécifié, comme la fonction document.querySelectorAll()JavaScript. Dans cet exemple, nous sélectionnons tous les éléments d’un <a> lien hypertexte, puis nous appliquons une zone verte autour d’eux :

   

Pour plus d’informations, voir Fonctions et sélecteurs d’utilitaires de l’outil Console.

Voir également

• Interagissez avec le DOM à l’aide de la console.
• Référence des fonctionnalités de la console
• Référence de l’API d’objet console
• Fonctions et sélecteurs d’utilitaires de l’outil console