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

Kayce Basques

Sofia Emelianova

Cette page fait référence aux fonctionnalités associées à la console des outils pour les développeurs Chrome. Nous partons du principe que vous savez déjà utiliser la console pour afficher les messages journalisés et exécuter JavaScript. Si ce n'est pas le cas, consultez la section Premiers pas.

Si vous souhaitez en savoir plus sur des fonctions telles que console.log(), consultez la documentation de référence de l'API Console. Pour en savoir plus sur les fonctions telles que monitorEvents(), consultez la documentation de référence de l'API Console Utilities.

Ouvrir la console

Vous pouvez ouvrir la console dans un panneau ou sous forme d'onglet du panneau.

Ouvrir le panneau de la console

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

Pour ouvrir la console à partir du menu de commande, commencez à saisir Console, puis exécutez la commande Show Console (Afficher la console) accompagnée du badge Panneau.

Ouvrir la console dans le panneau

Appuyez sur Échap ou cliquez sur Customize And Control DevTools (Personnaliser et contrôler les outils de développement) , puis sélectionnez Show Console Drawer (Afficher le panneau de la console).

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

Pour ouvrir l'onglet de la console à partir du menu de commandes, commencez à saisir Console, puis exécutez la commande Show Console (Afficher la console) accompagnée du badge Drawer.

Ouvrir les paramètres de la console

Cliquez sur Paramètres de la console dans l'angle supérieur droit de la console.

Important:À ne pas confondre avec les paramètres DevTools ci-dessus et à côté du menu à trois points .

Les liens ci-dessous décrivent 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 des requêtes XMLHttpRequest
• Évaluation hâtive
• Saisie semi-automatique à partir de l'historique

Ouvrir la barre latérale de la console

Cliquez sur Show Console Sidebar (Afficher la barre latérale de la console) pour afficher la barre latérale, qui est utile pour le filtrage.

Consulter les messages

Cette section contient des fonctionnalités qui modifient la présentation des messages dans la console. Pour un tutoriel pratique, consultez la section Afficher les messages.

Désactiver le regroupement des messages

Ouvrez les paramètres de la console et désactivez l'option Regrouper les messages similaires pour désactiver le comportement de regroupement des messages par défaut de la console. Consultez Consigner des requêtes XHR et Fetch pour obtenir un exemple.

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:

• console.* appels dans des points d'arrêt conditionnels avec un point d'interrogation orange ?
• Messages de point de journalisation avec deux points roses ..

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

Afficher les traces de la pile

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

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

Afficher les causes d'erreurs 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 des erreurs lors de l'identification et de la nouvelle génération des erreurs. À mesure que la console passe en revue la chaîne de causes, elle affiche chaque pile d'erreurs avec le préfixe Caused by:, afin que vous puissiez identifier l'erreur d'origine.

Afficher les traces de pile asynchrones

S'ils sont compatibles avec le framework que vous utilisez ou si vous utilisez directement les primitives de planification du navigateur, telles que setTimeout, les outils de développement peuvent suivre les opérations asynchrones en associant les deux parties du code asynchrone.

Dans ce cas, la trace de la pile affiche toute l'histoire de l'opération asynchrone.

Important:Les outils de développement implémentent cette fonctionnalité "Async Stack Tagging" en fonction de la méthode API console.createTask(). Les outils de développement encouragent les frameworks et les abstractions à utiliser cette API. Par exemple, Angular est compatible avec cette fonctionnalité.

Afficher les cadres tiers connus dans les traces de la pile

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

Pour afficher la trace de la pile complète, y compris les cadres tiers, cliquez sur Show N more frames (Afficher N autres frames) au 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 d'éléments à ignorer > Ajouter automatiquement des scripts tiers connus à la liste des éléments à ignorer.

Consigner les requêtes XHR et Fetch

Ouvrez les paramètres de la console et activez Consigner les requêtes XMLHttpRequest pour consigner XMLHttpRequest et Fetch toutes les requêtes dans la console en temps réel.

Le message du haut de l'exemple ci-dessus illustre 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 disparaît à chaque fois que vous chargez une nouvelle page. Pour conserver les messages lors des chargements de 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, dans l'exemple suivant, le message en haut de l'écran 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 partage des ressources entre origines multiples (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 les 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 Network (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, puis cliquez sur User Messages (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 la plupart des niveaux de gravité des méthodes console.*.

Il y a 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 les messages qui ne vous intéressent pas. Par exemple, si vous n'êtes intéressé que par les messages Error, vous pouvez masquer les trois autres groupes.

Cliquez sur la liste déroulante Log Levels (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 Détaillée.

Filtrer les messages par URL

Saisissez url: suivi d'une URL pour afficher uniquement les messages provenant de cette URL. Une fois que vous avez 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 consignent des messages, url:https://example.com vous permet de vous concentrer sur les messages de ces deux scripts.

Pour masquer tous les messages d'une URL spécifiée, 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 des messages provenant d'une seule URL. Pour ce faire, ouvrez la barre latérale de la console, développez la section Messages utilisateur, puis cliquez sur l'URL du script contenant les messages qui vous intéressent.

Filtrer les messages provenant de différents contextes

Supposons que vous ayez une annonce sur votre page. L'annonce est intégrée dans un élément <iframe> et génère de nombreux messages dans votre console. Comme cette annonce se trouve dans un contexte JavaScript différent, une façon de masquer ses messages consiste à ouvrir les paramètres de la console et à cocher 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 Filtrer pour filtrer tous les messages qui ne correspondent pas à ce format. Les espaces ne sont pas compatibles. Utilisez \s à la place. Les outils de développement vérifient si le schéma se trouve dans le texte du message ou dans le script qui a entraîné la journalisation du message.

L'exemple suivant filtre tous les messages qui ne correspondent pas à /[gm][ta][mi]/.

Rechercher du texte dans les journaux

Pour rechercher du texte dans les messages de 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 passer au résultat de recherche précédent ou suivant, appuyez sur la flèche 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. Consultez la page Exécuter JavaScript pour obtenir un tutoriel pratique.

Options de copie de chaîne

Par défaut, la console affiche les chaînes sous forme de littéraux JavaScript valides. Effectuez un clic droit sur une sortie et 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 avec des guillemets simples, des guillemets doubles ou des 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 en tant que littéral JSON. Formate la chaîne en JSON valide.

Réexécuter les expressions à partir de l'historique

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

Observez la valeur d'une expression en temps réel avec Expressions dynamiques

Si vous devez saisir plusieurs fois la même expression JavaScript dans la console, il sera peut-être plus facile de créer une expression active. Avec Expressions actives, vous saisissez une expression une fois, puis vous l'épinglez en haut de votre console. La valeur de l'expression est mise à jour en temps quasi réel. Consultez la section Surveiller les valeurs des expressions JavaScript en temps réel avec les expressions actives.

Désactiver l'évaluation eager

À mesure que vous saisissez des expressions JavaScript dans la console, la page Eager Evaluation affiche un aperçu de la valeur de retour de cette expression. Ouvrez les paramètres de la console et décochez la case Eager Evaluation pour désactiver les aperçus des valeurs de retour.

Déclencher l'activation des utilisateurs avec l'évaluation

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

Pour déclencher l'activation des utilisateurs avec n'importe quelle évaluation, ouvrez les paramètres de la console, puis cochez la case Évaluation déclenche l'activation de l'utilisateur.

Désactiver la saisie semi-automatique depuis 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 évalué document.querySelector('a') et document.querySelector('img').

Ouvrez les paramètres de la console, puis décochez la case Saisie semi-automatique à partir de l'historique pour arrêter d'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, ce qui représente le contexte de navigation du document principal.

Supposons que vous ayez intégré une annonce sur votre page dans un élément <iframe>. Vous souhaitez exécuter JavaScript afin d'ajuster 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.

Propriétés Spot propres et héritées

La console trie d'abord les propriétés des objets et les met en surbrillance en gras.

Les propriétés héritées de la chaîne de prototype sont en police standard. 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 ignorées. Les propriétés énumérables peuvent être itérées avec la boucle for … in ou la méthode Object.keys().

Identifier 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 le préfixe #.

La console peut également utiliser la saisie semi-automatique pour 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

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

Les propriétés internes suivantes peuvent s'afficher sur différents objets:

• Tout objet possède une [[Prototype]].
• Les wrappers primitifs possèdent une propriété [[PrimitiveValue]].
• Les objets ArrayBuffer possèdent les propriétés suivantes :
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]] et [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
    Point clé:Pour inspecter un ArrayBuffer JavaScript auquel un objet vue fait référence, cliquez sur le bouton .
• En plus des propriétés spécifiques à ArrayBuffer, les objets WebAssembly.Memory ont une propriété [[WebAssemblyMemory]].
• Les collections avec clé (cartes et ensembles) possèdent une propriété [[Entries]] qui contient leurs entrées appariées.
• Les objets Promise possèdent les propriétés suivantes :
  • [[PromiseState]]: en attente, traité ou refusé
  • [[PromiseResult]]: undefined s'il est en attente, <value> s'il est traité, <reason> s'il est refusé
• Les objets Proxy ont les propriétés suivantes: objet [[Handler]], objet [[Target]] et [[isRevoked]] (désactivé ou non).

Inspecter les fonctions

En JavaScript, les fonctions sont également des objets dotés de propriétés. Cependant, 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 des fonctions internes à JavaScript, utilisez la commande console.dir().

Les fonctions ont les propriétés suivantes:

• [[FunctionLocation]] : lien vers la ligne contenant la définition de la fonction dans un fichier source.
• [[Scopes]] : répertorie les valeurs et les expressions auxquelles la fonction a accès. Pour inspecter les champs d'application des fonctions pendant le débogage, consultez Afficher et modifier les propriétés locales, fermées et globales.
• Les fonctions de liaison ont les propriétés suivantes :
  • [[TargetFunction]] : cible de bind().
  • [[BoundThis]] : valeur de this.
  • [[BoundArgs]] : tableau d'arguments de fonction.
• Les fonctions du générateur sont marquées à l'aide d'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.

Vider la console

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

• Cliquez sur Clear Console (Effacer la console) .
• Effectuez un clic droit sur un message, puis sélectionnez Clear Console (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 active.