Messages de journal dans la console

Kayce Basques

Ce tutoriel interactif vous explique comment consigner et filtrer des messages dans la console des Outils pour les développeurs Chrome.

Ce tutoriel doit être suivi dans l'ordre. Il suppose que vous comprenez les principes fondamentaux du développement Web, par exemple comment utiliser JavaScript pour ajouter de l'interactivité à une page.

Configurer la démo et les outils de développement

Ce tutoriel est conçu pour vous permettre d'ouvrir la démo et d'essayer vous-même tous les workflows. Lorsque vous suivez physiquement les étapes, vous êtes plus susceptible de vous souvenir des workflows par la suite.

1. Ouvrez la démonstration.

2. Facultatif : Déplacez la démo dans une fenêtre distincte. Dans cet exemple, le tutoriel se trouve à gauche et la démo à droite.

   

3. Sélectionnez la démo, puis appuyez sur Ctrl+Maj+J ou Cmd+Option+J (Mac) pour ouvrir les outils de développement. Par défaut, les outils de développement s'ouvrent à droite de la démo.

   

4. Facultatif : Ancrez les outils de développement en bas de la fenêtre ou détachez-les dans une fenêtre distincte.

   Outils de développement ancrés en bas de la démo :

   Outils de développement détachés dans une fenêtre distincte :

Afficher les messages enregistrés à partir de JavaScript

La plupart des messages que vous voyez dans la console proviennent des développeurs Web qui ont écrit le code JavaScript de la page. L'objectif de cette section est de vous présenter les différents types de messages que vous êtes susceptible de voir dans la console et de vous expliquer comment consigner vous-même chaque type de message à partir de votre propre code JavaScript.

1. Cliquez sur le bouton Log Info (Informations de journal) dans la démo. Hello, Console! est consigné dans la console.

   

2. À côté du message Hello, Console! dans la console, cliquez sur log.js:2. Le panneau Sources s'ouvre et met en surbrillance la ligne de code qui a entraîné la journalisation du message dans la console.

   

   Le message a été consigné lorsque le JavaScript de la page a appelé console.log('Hello, Console!').

3. Revenez à la console en suivant l'une des procédures suivantes :

   • Cliquez sur l'onglet Console.
   • Appuyez sur Ctrl+[ ou Cmd+[ (Mac) jusqu'à ce que la console soit sélectionnée.
   • Ouvrez le menu de commandes, commencez à saisir Console, sélectionnez la commande Afficher le panneau de la console, puis appuyez sur Entrée.

4. Cliquez sur le bouton Log Warning (Consigner l'avertissement) dans la démo. Abandon Hope All Ye Who Enter est consigné dans la console.

   

   Les messages mis en forme de cette manière sont des avertissements.

5. Facultatif : Cliquez sur log.js:12 pour afficher le code qui a entraîné la mise en forme du message, puis revenez à Console lorsque vous avez terminé. Faites-le chaque fois que vous souhaitez voir le code qui a entraîné la journalisation d'un message d'une certaine manière.

6. Cliquez sur l'icône Développer devant Abandon Hope All Ye Who Enter. Les outils de développement affichent la trace de la pile menant à l'appel.

   

   La trace de la pile vous indique qu'une fonction nommée logWarning a été appelée, qui à son tour a appelé une fonction nommée quoteDante. En d'autres termes, l'appel qui s'est produit en premier se trouve en bas de la trace de la pile. Vous pouvez enregistrer des traces de pile à tout moment en appelant console.trace().

7. Cliquez sur Enregistrer l'erreur. Le message d'erreur suivant est consigné : I'm sorry, Dave. I'm afraid I can't do that.

   

8. Cliquez sur Tableau de journaux. Un tableau sur les artistes célèbres est consigné dans la console.

   

   Notez que la colonne birthday n'est renseignée que pour une seule ligne. Vérifiez le code pour comprendre pourquoi.

9. Cliquez sur Groupe de journaux. Les noms de quatre célèbres tortues combattant le crime sont regroupés sous le libellé Adolescent Irradiated Espionage Tortoises.

   

10. Cliquez sur Enregistrer une activité personnalisée. Un message avec une bordure rouge et un arrière-plan bleu est consigné dans la console.

    

L'idée principale ici est que lorsque vous souhaitez consigner des messages dans la console à partir de votre code JavaScript, vous utilisez l'une des méthodes console. Chaque méthode met en forme les messages différemment.

Il existe encore plus de méthodes que celles présentées dans cette section. À la fin de ce tutoriel, vous apprendrez à explorer le reste des méthodes.

Afficher les messages enregistrés par le navigateur

Le navigateur consigne également les messages dans la console. Cela se produit généralement en cas de problème avec la page.

1. Cliquez sur Générer une erreur 404. Le navigateur enregistre une erreur réseau 404, car le code JavaScript de la page a tenté de récupérer un fichier qui n'existe pas.

   

2. Cliquez sur Cause Error (Provoquer une erreur). Le navigateur enregistre une erreur TypeError non interceptée, car le code JavaScript tente de mettre à jour un nœud DOM qui n'existe pas.

   

3. Cliquez sur le menu déroulant Niveaux de journalisation et activez l'option Détaillé si elle est désactivée. Vous en saurez plus sur le filtrage dans la section suivante. Vous devez le faire pour vous assurer que le prochain message que vous enregistrerez sera visible. Remarque : Si le menu déroulant "Niveaux par défaut" est désactivé, vous devrez peut-être fermer la barre latérale de la console. Pour en savoir plus sur la barre latérale de la console, filtrez par source de message ci-dessous.

   

4. Cliquez sur Cause de la violation. La page ne répond plus pendant quelques secondes, puis le navigateur consigne le message [Violation] 'click' handler took 3000ms dans la console. La durée exacte peut varier.

   

Filtrer les messages

Sur certaines pages, la console est inondée de messages. Les outils de développement offrent de nombreuses façons de filtrer les messages qui ne sont pas pertinents pour la tâche à accomplir.

Important : La console ne filtre que les messages de sortie. Toutes les entrées que vous avez saisies dans la console restent affichées.

Filtrer par niveau de journal

Chaque méthode console.* est associée à un niveau de gravité : Verbose, Info, Warning ou Error. Par exemple, console.log() est un message de niveau Info, tandis que console.error() est un message de niveau Error.

Remarque : Pour obtenir la liste complète des méthodes console.* et de leurs niveaux de gravité, consultez la documentation de référence sur l'API Console.

Pour filtrer par niveau de journal :

1. Cliquez sur le menu déroulant Niveaux de journalisation et désactivez Erreurs. Un niveau est désactivé lorsqu'il n'y a plus de coche à côté. Les messages de niveau Error disparaissent.

   

2. Cliquez à nouveau sur le menu déroulant Niveaux de journalisation et réactivez Erreurs. Les messages de niveau Error réapparaissent.

Important : La console se souvient toujours du filtre du menu déroulant que vous appliquez. Il persiste sur toutes les pages, ainsi que lors des rechargements de page, des Outils de développement et de Chrome. Pour appliquer rapidement un filtre temporaire, utilisez la barre latérale.

Filtrer par texte

Si vous souhaitez n'afficher que les messages contenant une chaîne exacte, saisissez cette chaîne dans la zone Filtre.

1. Saisissez Dave dans la zone Filtre. Tous les messages qui n'incluent pas la chaîne Dave sont masqués.

   

2. Supprimez Dave de la zone Filtre. Tous les messages réapparaissent.

Filtrer par expression régulière

Si vous souhaitez afficher tous les messages qui incluent un modèle de texte plutôt qu'une chaîne spécifique, utilisez une expression régulière.

1. Saisissez /^[AH]/ dans la zone Filtre. Saisissez ce modèle dans RegExr pour obtenir une explication de son fonctionnement.

   

2. Supprimez /^[AH]/ de la zone Filtre. Tous les messages sont de nouveau visibles.

Filtrer par source de message

Si vous souhaitez afficher uniquement les messages provenant d'une URL spécifique, utilisez la barre latérale.

Important : Les filtres de la barre latérale sont temporaires. La console ne conserve pas ces filtres sur toutes les pages, ni lors des rechargements de page, des outils pour les développeurs et de Chrome.

1. Cliquez sur Afficher la barre latérale de la console .

   

2. Cliquez sur l'icône Développer à côté de 12 messages. La barre latérale affiche la liste des URL qui ont entraîné la journalisation des messages. Par exemple, log.js a généré 11 messages.

   

Filtrer par messages utilisateur

Auparavant, lorsque vous cliquiez sur Log Info, un script appelé console.log('Hello, Console!') était exécuté pour consigner le message dans la console. Les messages enregistrés à partir de JavaScript comme celui-ci sont appelés messages utilisateur. En revanche, lorsque vous avez cliqué sur Cause 404, le navigateur a consigné un message de niveau Error indiquant que la ressource demandée était introuvable. Ces messages sont considérés comme des messages du navigateur. Vous pouvez utiliser la barre latérale pour filtrer les messages du navigateur et n'afficher que les messages des utilisateurs.

1. Cliquez sur 9 messages utilisateur. Les messages du navigateur sont masqués.

   

2. Cliquez sur 12 messages pour afficher à nouveau tous les messages.

Utiliser la console avec n'importe quel autre panneau

Que faire si vous modifiez des styles, mais que vous devez vérifier rapidement le journal de la console pour trouver quelque chose ? Utilisez le tiroir.

1. Cliquez sur l'onglet Éléments.

2. Appuyez sur Échap. L'onglet Console du Tiroir s'ouvre. Il possède toutes les fonctionnalités de la console que vous avez utilisée tout au long de ce tutoriel.

   

Étapes suivantes

Félicitations, vous avez terminé le tutoriel. Cliquez sur Dispense Trophy (Distribuer le trophée) pour recevoir votre trophée.

• Consultez la documentation de référence de la console pour découvrir d'autres fonctionnalités et workflows liés à l'UI de la console.
• Consultez la documentation de référence sur l'API Console pour en savoir plus sur toutes les méthodes console présentées dans Afficher les messages enregistrés à partir de JavaScript et découvrir les autres méthodes console qui n'ont pas été abordées dans ce tutoriel.
• Consultez Premiers pas pour découvrir ce que vous pouvez faire d'autre avec les outils de développement.
• Pour en savoir plus sur toutes les méthodes de mise en forme et de style console, consultez Mettre en forme et styliser les messages dans la console.