Documentation de référence sur les fonctionnalités de la console

Cette page présente les fonctionnalités liées à la console des outils pour les développeurs Chrome. Il suppose que vous savez déjà utiliser la console pour afficher les messages enregistrés et exécuter du code JavaScript. Si ce n'est pas le cas, consultez Premiers pas.

Si vous recherchez la documentation de référence de l'API sur des fonctions telles que console.log(), consultez la documentation de référence de l'API Console. Pour obtenir des informations de référence sur des fonctions telles que monitorEvents(), consultez la documentation de référence sur l'API des utilitaires de la console.

Ouvrir la console

Vous pouvez ouvrir la console en tant que panneau ou en tant qu'onglet dans le tiroir.

Ouvrir le panneau "Console"

Appuyez sur Ctrl+Maj+J ou Cmd+Option+J (Mac).

Pour ouvrir la console à partir du menu de commandes, commencez à saisir Console, puis exécutez la commande Afficher la console qui comporte le badge Panneau à côté.

Ouvrir la console dans le panneau

Appuyez sur Échap ou cliquez sur Personnaliser et contrôler les outils de développement , puis sélectionnez Afficher le tiroir de la console.

Le panneau s'affiche en bas de la fenêtre des outils de développement, avec l'onglet Console ouvert.

Pour ouvrir l'onglet "Console" à partir du menu de commandes, commencez à saisir Console, puis exécutez la commande Show Console (Afficher la console) qui comporte le badge Drawer (Tiroir) à côté.

Ouvrir les paramètres de la console

Cliquez sur Paramètres de la console en haut à droite de la console.

Les liens ci-dessous expliquent chaque paramètre :

• Masquer le réseau
• Conserver le journal
• Contexte sélectionné uniquement
• Regrouper les messages similaires dans la console
• Afficher les erreurs CORS dans la console
• Consigner les XMLHttpRequests
• Évaluation eager
• Saisie semi-automatique à partir de l'historique

Ouvrir la barre latérale de la console

Cliquez sur Afficher la barre latérale de la console pour afficher la barre latérale, qui est utile pour filtrer les données.

Consulter les messages

Cette section contient des fonctionnalités qui modifient la façon dont les messages sont présentés dans la console. Pour obtenir un tutoriel pratique, consultez Afficher les messages.

Désactiver le regroupement des messages

Ouvrez les paramètres de la console et désactivez Regrouper les messages similaires pour désactiver le comportement de regroupement des messages par défaut de la console. Pour voir un exemple, consultez Consigner les requêtes XHR et Fetch.

Afficher les messages des points d'arrêt

La console marque les messages déclenchés par des points d'arrêt de la manière suivante :

• Appels console.* dans les points d'arrêt conditionnels avec un point d'interrogation orange ?
• Messages Logpoint avec deux points roses ..

Pour accéder à l'éditeur de points d'arrêt intégrés dans le panneau Sources, cliquez sur le lien d'ancrage à côté du message du point d'arrêt.

Afficher les traces de pile

La console capture automatiquement les traces de pile pour les erreurs et les avertissements. Une trace de pile est un historique des appels de fonction (frames) qui ont entraîné l'erreur ou l'avertissement. La console les affiche dans l'ordre inverse : la dernière frame se trouve en haut.

Pour afficher une trace de la pile, cliquez sur l'icône Développer  à côté d'une erreur ou d'un avertissement.

Afficher les causes d'erreur dans les traces de la pile

La console peut afficher des chaînes de causes d'erreur dans la trace de la pile, le cas échéant.

Pour faciliter le débogage, vous pouvez spécifier les causes d'erreur lorsque vous capturez et relancez des erreurs. À mesure que la console remonte la chaîne de causalité, elle affiche chaque pile d'erreurs avec un préfixe Caused by:, ce qui vous permet de trouver l'erreur d'origine.

Afficher les traces de pile asynchrones

Si le framework que vous utilisez le permet ou lorsque vous utilisez directement des primitives de planification du navigateur, telles que setTimeout, les outils de développement peuvent tracer les opérations asynchrones en associant les deux parties du code asynchrone.

Dans ce cas, la trace de la pile montre l'histoire complète de l'opération asynchrone.

Afficher les frames tiers connus dans les traces de pile

Lorsque les source maps incluent le champ ignoreList, la console masque par défaut les frames tiers des sources générées par les bundlers (par exemple, webpack) ou les frameworks (par exemple, Angular) dans les traces de pile.

Pour afficher la trace de la pile complète, y compris les frames tiers, cliquez sur Afficher N frames supplémentaires en bas de la trace de la pile.

Pour toujours afficher la trace de la pile complète, désactivez le paramètre Paramètres > Liste des éléments à ignorer > Ajouter automatiquement des scripts tiers connus à une liste d'éléments à ignorer.

Enregistrer les requêtes XHR et Fetch

Ouvrez les paramètres de la console et activez l'option Consigner les XMLHttpRequests pour consigner toutes les requêtes XMLHttpRequest et Fetch dans la console au fur et à mesure de leur traitement.

Le message en haut de l'exemple ci-dessus montre le comportement de regroupement par défaut de la console. L'exemple ci-dessous montre à quoi ressemble le même journal après la désactivation du regroupement des messages.

Conserver les messages lors des chargements de page

Par défaut, la console est effacée chaque fois que vous chargez une nouvelle page. Pour conserver les messages lors du chargement des pages, ouvrez les paramètres de la console, puis cochez la case Conserver le journal.

Masquer les messages réseau

Par défaut, le navigateur consigne les messages réseau dans la console. Par exemple, le message en haut de l'exemple suivant représente une erreur 404.

Pour masquer les messages réseau :

1. Ouvrez les paramètres de la console.
2. Cochez la case Masquer le réseau.

Afficher ou masquer les erreurs CORS

La console peut afficher des erreurs CORS si les requêtes réseau échouent en raison du Cross-Origin Resource Sharing (CORS).

Pour afficher ou masquer les erreurs CORS :

1. Ouvrez les paramètres de la console.
2. Cochez ou décochez la case Afficher les erreurs CORS dans la console.

Si la console est configurée pour afficher les erreurs CORS et que vous en rencontrez, vous pouvez cliquer sur les boutons suivants à côté des erreurs :

• pour ouvrir la requête avec un TypeError lié à CORS dans le panneau Réseau.
• pour obtenir une solution potentielle dans l'onglet Problèmes.

Filtrer les messages

Il existe de nombreuses façons de filtrer les messages dans la console.

Filtrer les messages du navigateur

Ouvrez la barre latérale de la console et cliquez sur Messages utilisateur pour n'afficher que les messages provenant du code JavaScript de la page.

Filtrer par niveau de journal

Les Outils de développement attribuent des niveaux de gravité à la plupart des méthodes console.*.

Il existe quatre niveaux :

• Verbose
• Info
• Warning
• Error

Par exemple, console.log() se trouve dans le groupe Info, tandis que console.error() se trouve dans le groupe Error. La documentation de référence de l'API Console décrit le niveau de gravité de chaque méthode applicable.

Chaque message que le navigateur enregistre dans la console possède également un niveau de gravité. Vous pouvez masquer tous les niveaux de messages qui ne vous intéressent pas. Par exemple, si vous ne vous intéressez qu'aux messages Error, vous pouvez masquer les trois autres groupes.

Cliquez sur le menu déroulant Niveaux de journalisation pour activer ou désactiver les messages Verbose, Info, Warning ou Error.

Vous pouvez également filtrer par niveau de journalisation en ouvrant la barre latérale de la console, puis en cliquant sur Erreurs, Avertissements, Infos ou Verbeux.

Filtrer les messages par URL

Saisissez url: suivi d'une URL pour n'afficher que les messages provenant de cette URL. Après avoir saisi url:, les outils de développement affichent toutes les URL pertinentes.

Les domaines fonctionnent également. Par exemple, si https://example.com/a.js et https://example.com/b.js enregistrent des messages, url:https://example.com vous permet de vous concentrer sur les messages de ces deux scripts.

Pour masquer tous les messages provenant d'une URL spécifique, saisissez -url: suivi de l'URL, par exemple https://b.wal.co. Il s'agit d'un filtre d'URL à exclure.

Vous pouvez également afficher les messages d'une seule URL en ouvrant la barre latérale de la console, en développant la section Messages utilisateur, puis en cliquant sur l'URL du script contenant les messages sur lesquels vous souhaitez vous concentrer.

Filtrer les messages provenant de différents contextes

Imaginons que vous ayez une annonce sur votre page. L'annonce est intégrée dans un <iframe> et génère de nombreux messages dans la console. Étant donné que cette annonce se trouve dans un contexte JavaScript différent, vous pouvez masquer ses messages en ouvrant les paramètres de la console et en cochant la case Contexte sélectionné uniquement.

Filtrer les messages qui ne correspondent pas à un modèle d'expression régulière

Saisissez une expression régulière telle que /[foo]\s[bar]/ dans la zone de texte Filtre pour filtrer tous les messages qui ne correspondent pas à ce modèle. Les espaces ne sont pas acceptés. Utilisez plutôt \s. Les outils de développement vérifient si le modèle se trouve dans le texte du message ou dans le script qui a entraîné la journalisation du message.

Par exemple, le filtre suivant exclut tous les messages qui ne correspondent pas à /[gm][ta][mi]/.

Rechercher du texte dans les journaux

Pour rechercher du texte dans les messages du journal :

1. Pour ouvrir une barre de recherche intégrée, appuyez sur Cmd+F (Mac) ou Ctrl+F (Windows, Linux).
2. Dans la barre, saisissez votre requête. Dans cet exemple, la requête est legacy. Vous pouvez également :
   • Cliquez sur Respecter la casse pour rendre votre requête sensible à la casse.
   • Cliquez sur Utiliser une expression régulière pour effectuer une recherche à l'aide d'une expression régulière.
3. Appuyez sur Entrée. Pour accéder au résultat de recherche précédent ou suivant, appuyez sur le bouton vers le haut ou vers le bas.

Exécuter JavaScript

Cette section contient des fonctionnalités liées à l'exécution de JavaScript dans la console. Pour un tutoriel pratique, consultez Exécuter du code JavaScript.

Options de copie de chaînes

Par défaut, la console génère des chaînes sous forme de littéraux JavaScript valides. Effectuez un clic droit sur un résultat, puis choisissez l'une des trois options de copie :

• Copier en tant que littéral JavaScript Échappe les caractères spéciaux appropriés et encapsule la chaîne entre guillemets simples, guillemets doubles ou accents graves, selon le contenu.
• Copiez le contenu de la chaîne. Copie la chaîne brute exacte dans le presse-papiers, y compris les nouvelles lignes et autres caractères spéciaux.
• Copier la chaîne en tant que littéral JSON Met en forme la chaîne au format JSON valide.

Exécuter à nouveau des expressions précédentes et effacer l'historique

Appuyez sur la touche Flèche vers le haut pour parcourir l'historique des expressions JavaScript que vous avez exécutées précédemment dans la console. Appuyez sur Entrée pour exécuter à nouveau cette expression.

Pour effacer l'historique de la console, effectuez un clic droit sur un espace vide dans la console, puis sélectionnez Effacer l'historique de la console dans le menu contextuel.

Effacer, copier, développer, réduire et enregistrer des messages

Pour effacer la fenêtre Console, effectuez l'une des opérations suivantes :

• Cliquez sur block Effacer la console dans la barre d'action en haut de l'écran.
• Appuyez sur Ctrl+L ou Cmd+K.
• Effectuez un clic droit sur un espace vide dans la console, puis sélectionnez Effacer la console dans le menu contextuel.

Pour développer ou réduire tous les messages, cliquez sur Développer Tout développer ou Réduire Tout réduire dans la barre d'action en haut de l'écran.

Dans le menu contextuel, vous pouvez également :

• Copier la console : copie tous les messages actuels dans le presse-papiers, mais pas l'historique des commandes précédentes.
• Enregistrer sous… : Enregistrez tous les messages actuels dans un fichier .log en texte brut.

Surveiller la valeur d'une expression en temps réel avec les expressions en direct

Si vous saisissez la même expression JavaScript de façon répétée dans la console, vous pouvez créer une expression en direct pour vous faciliter la tâche. Avec les expressions en direct, vous saisissez une expression une seule fois, puis vous l'épinglez en haut de la console. La valeur de l'expression est mise à jour en temps quasi réel. Consultez Watch JavaScript Expression Values In Real-Time With Live Expressions (Surveiller les valeurs des expressions JavaScript en temps réel avec les expressions dynamiques).

Désactiver l'évaluation eager

Lorsque vous saisissez des expressions JavaScript dans la console, l'évaluation anticipée affiche un aperçu de la valeur renvoyée par cette expression. Ouvrez les paramètres de la console et décochez la case Évaluation anticipée pour désactiver les aperçus des valeurs renvoyées.

Déclencher l'activation de l'utilisateur avec l'évaluation

L'activation de l'utilisateur est l'état d'une session de navigation qui dépend des actions de l'utilisateur. Un état "actif" signifie que l'utilisateur interagit actuellement avec la page ou qu'il a interagi avec elle depuis son chargement.

Pour déclencher l'activation de l'utilisateur avec n'importe quelle évaluation, ouvrez les paramètres de la console et cochez Traiter l'évaluation du code comme une action de l'utilisateur.

Désactiver la saisie semi-automatique à partir de l'historique

À mesure que vous saisissez une expression, le pop-up de saisie semi-automatique de la console affiche les expressions que vous avez exécutées précédemment. Ces expressions sont précédées du caractère >. Dans l'exemple suivant, les outils de développement ont précédemment évalué document.querySelector('a') et document.querySelector('img').

Ouvrez les paramètres de la console et décochez la case Saisie semi-automatique à partir de l'historique pour ne plus afficher les expressions de votre historique.

Sélectionner le contexte JavaScript

Par défaut, le menu déroulant Contexte JavaScript est défini sur top, qui représente le contexte de navigation du document principal.

Imaginons que vous ayez une annonce sur votre page intégrée dans un <iframe>. Vous souhaitez exécuter JavaScript pour modifier le DOM de l'annonce. Pour ce faire, vous devez d'abord sélectionner le contexte de navigation de l'annonce dans le menu déroulant Contexte JavaScript.

Inspecter les propriétés des objets

La console peut afficher une liste interactive des propriétés d'un objet JavaScript que vous spécifiez.

Pour parcourir la liste, saisissez le nom de l'objet dans la console, puis appuyez sur Entrée.

Pour inspecter les propriétés des objets DOM, suivez la procédure décrite dans Afficher les propriétés des objets DOM.

Identifier les propriétés propres et héritées

La console trie d'abord les propriétés de l'objet et les met en gras.

Les propriétés héritées de la chaîne de prototype sont en police normale. La console les affiche sur l'objet lui-même en évaluant les accesseurs natifs correspondants des objets intégrés.

Évaluer les accesseurs personnalisés

Par défaut, les outils de développement n'évaluent pas les accesseurs que vous créez. Pour évaluer un accesseur personnalisé sur un objet, cliquez sur (...).

Identifier les propriétés énumérables et non énumérables

Les propriétés énumérables sont de couleur vive. Les propriétés non énumérables sont mises en sourdine. Les propriétés énumérables peuvent être itérées avec la boucle for … in ou la méthode Object.keys().

Repérer les propriétés privées des instances de classe

La console désigne les propriétés privées des instances de classe avec un préfixe #.

La console peut également compléter automatiquement les propriétés privées, même lorsque vous les évaluez en dehors du champ d'application de la classe.

Inspecter les propriétés JavaScript internes

En reprenant la notation ECMAScript, la console place certaines propriétés internes à JavaScript entre doubles crochets. Vous ne pouvez pas interagir avec ces propriétés dans votre code. Toutefois, il peut être utile de les inspecter.

Vous pouvez voir les propriétés internes suivantes sur différents objets :

• Chaque objet possède un [[Prototype]].
• Les wrappers primitifs ont une propriété [[PrimitiveValue]].
• Les objets ArrayBuffer ont les propriétés suivantes :
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• En plus des propriétés spécifiques à ArrayBuffer, les objets WebAssembly.Memory possèdent une propriété [[WebAssemblyMemory]].
• Les collections à clé (maps et ensembles) ont une propriété [[Entries]] qui contient leurs entrées à clé.
• Les objets Promise ont les propriétés suivantes :
  • [[PromiseState]] : en attente, traitée ou refusée
  • [[PromiseResult]] : undefined si la demande est en attente, <value> si elle est traitée, <reason> si elle est refusée
• Les objets Proxy ont les propriétés suivantes : objet [[Handler]], objet [[Target]] et [[isRevoked]] (activé ou non).

Inspecter les fonctions

En JavaScript, les fonctions sont également des objets avec des propriétés. Toutefois, si vous saisissez un nom de fonction dans la console, les outils de développement l'appellent au lieu d'afficher ses propriétés.

Pour afficher les propriétés de fonction internes à JavaScript, utilisez la commande console.dir().

Les fonctions présentent les propriétés suivantes :

• [[FunctionLocation]] : lien vers la ligne contenant la définition de la fonction dans un fichier source.
• [[Scopes]] : liste les valeurs et les expressions auxquelles la fonction a accès. Pour inspecter les portées de fonction pendant le débogage, consultez Afficher et modifier les propriétés locales, de fermeture et globales.
• Les fonctions liées présentent les propriétés suivantes :
  • [[TargetFunction]] : cible de bind()
  • [[BoundThis]]. Valeur de this.
  • [[BoundArgs]]. Tableau d'arguments de fonction.
• Les fonctions de générateur sont marquées avec une propriété [[IsGenerator]]: true.
• Les générateurs renvoient des objets itérateurs et possèdent les propriétés suivantes :
  • [[GeneratorLocation]] : lien vers une ligne contenant la définition du générateur dans un fichier source.
  • [[GeneratorState]] : suspended, closed ou running..
  • [[GeneratorFunction]] : générateur ayant renvoyé l'objet.
  • [[GeneratorReceiver]] : objet qui reçoit la valeur.

Effacer la console

Vous pouvez utiliser l'un des workflows suivants pour effacer la console :

• Cliquez sur Effacer la console .
• Effectuez un clic droit sur un message, puis sélectionnez Effacer la console.
• Saisissez clear() dans la console, puis appuyez sur Entrée.
• Appelez console.clear() à partir du code JavaScript de votre page Web.
• Appuyez sur Ctrl+L lorsque la console est sélectionnée.