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

Kayce basque

Twitter GitHub Glitch

Sofia Emelianova

GitHub

Cette page est une référence des 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 enregistrés et exécuter JavaScript. Si ce n'est pas le cas, consultez la section 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 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 sous forme de panneau ou d'onglet dans le panneau.

Ouvrir le panneau de la console

Appuyez sur Ctrl+Maj+J ou 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 Personnaliser et contrôler les Outils de développement , puis sélectionnez Afficher le panneau 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 de la console à partir du menu de commande, commencez à saisir Console, puis exécutez la commande Show Console (Afficher la console) accompagnée du badge Drawer (Panneau).

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 Paramètres des outils de développement au-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 des messages similaires dans la console
• Afficher les erreurs CORS dans la console
• Journaliser les requêtes XMLHttpRequest
• Évaluation rapide
• 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, utile pour le filtrage.

Consulter les messages

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

Désactiver le regroupement des messages

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

Afficher les messages des points d'arrêt

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

• Appels console.* 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 enregistre 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 apparaît 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 traces de pile asynchrones

Si le framework que vous utilisez le permet ou si vous utilisez directement des 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 la fonctionnalité "Async Stack Tagging" sur la base 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 frames tiers connus dans les traces de la pile

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

Pour afficher la trace de la pile complète, y compris les cadres tiers, cliquez sur 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 l'option Consigner les requêtes XMLHttpRequest pour consigner toutes les requêtes XMLHttpRequest etFetch dans la console en temps réel.

Le message principal 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 s'efface lorsque vous chargez une nouvelle page. Pour conserver les messages lors des chargements de page, 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. Dans l'exemple suivant, le message en haut de la page 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, procédez comme suit:

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 en regard des erreurs:

• pour ouvrir la requête avec un TypeError lié au 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, puis cliquez sur User Messages (Messages utilisateur) pour afficher uniquement 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 seuls les messages Error vous intéressent, vous pouvez masquer les trois autres groupes.

Cliquez sur le menu déroulant 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é.

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 les 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é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 à partir 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 votre page comporte une annonce. 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, vous pouvez masquer ses messages en ouvrant les paramètres de la console et en cochant la case Contexte sélectionné uniquement.

Exclure 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 Filter (Filtrer) pour filtrer 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 format figure dans le texte du message ou dans le script à l'origine de la journalisation du message.

Par exemple, la requête suivante filtre tous les messages qui ne correspondent pas à /[gm][ta][mi]/.

Rechercher du texte dans les journaux

Pour rechercher du texte dans des 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. Si vous le souhaitez, vous pouvez :
   • 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 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 section Exécuter JavaScript pour un tutoriel pratique.

Options de copie de chaîne

Par défaut, la console génère 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 suivantes:

• Copier en tant que littéral JavaScript : Échappe les caractères spéciaux appropriés et encapsule la chaîne entre 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 d'autres caractères spéciaux.
• Copier en tant que littéral JSON. Met en forme la chaîne en un format JSON valide.

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

Appuyez sur la 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 l'expression.

Observez la valeur d'une expression en temps réel grâce aux expressions en direct

Si vous devez saisir plusieurs fois la même expression JavaScript dans la console, il peut être plus facile de créer une expression active. Avec Expressions dynamiques, 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 Observer les valeurs d'expression JavaScript en temps réel avec des expressions en direct.

Désactiver l'évaluation eager

À mesure que vous saisissez des expressions JavaScript dans la console, l'évaluation eager affiche un aperçu de la valeur renvoyée par 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 de l'utilisateur 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 depuis son chargement.

Pour déclencher l'activation de l'utilisateur avec n'importe quelle évaluation, ouvrez les paramètres de la console, puis cochez Évaluer les déclencheurs de 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 et désactivez la case Saisie semi-automatique à partir de l'historique pour arrêter d'afficher les expressions de votre historique.

Sélectionner un contexte JavaScript

Par défaut, la liste déroulante Contexte JavaScript est définie sur top, qui représente le contexte de navigation du document principal.

Supposons que l'annonce de votre page soit intégrée 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 d'un objet

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 l'article Afficher les propriétés des objets DOM.

Propriétés propriétaires et héritées du Spot

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 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().

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 effectuer une saisie semi-automatique des 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. Elle contient 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.

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

• Tout objet possède une [[Prototype]].
• Les wrappers primitifs ont une propriété [[PrimitiveValue]].
• Les objets ArrayBuffer possèdent les propriétés suivantes :
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]] et [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
    Important:Pour inspecter un ArrayBuffer JavaScript auquel un objet de 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 à clé (cartes et ensembles) possèdent une propriété [[Entries]] qui contient leurs entrées associées.
• Les objets Promise possèdent les propriétés suivantes :
  • [[PromiseState]]: en attente, traité ou refusé
  • [[PromiseResult]]: undefined si 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. 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 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 présentent les propriétés suivantes :
  • [[TargetFunction]] : cible de bind().
  • [[BoundThis]] : valeur de this.
  • [[BoundArgs]] : tableau d'arguments de la fonction.
• Les fonctions du générateur sont identifiées à l'aide d'une propriété [[IsGenerator]]: true.
• Les générateurs renvoient des objets itérateurs dotés des 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.