Messages de journal dans la console

Kayce Basques

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

Ce tutoriel est conçu pour être suivi dans l'ordre. Nous partons du principe que vous maîtrisez les principes fondamentaux du développement Web, tels que l'utilisation de JavaScript pour ajouter de l'interactivité à une page.

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

Ce tutoriel est conçu pour que vous puissiez ouvrir la démonstration et tester par vous-même tous les workflows. Lorsque vous suivez physiquement, 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émonstration à droite.

   

3. Sélectionnez la démonstration, 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 au bas de la fenêtre ou détachez-les dans une fenêtre distincte.

   Outils de développement ancrés au bas de la démonstration :

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

Afficher les messages consigné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 enregistrer chacun d'eux à partir de votre propre JavaScript.

1. Dans la démonstration, cliquez sur le bouton Enregistrer les informations. 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 ayant entraîné la journalisation du message dans la console.

   

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

3. Revenez à la console en procédant de l'une des façons suivantes:

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

4. Dans la démonstration, cliquez sur le bouton Log Warning (Avertissement). Abandon Hope All Ye Who Enter est consigné dans la console.

   

   Les messages dans ce format sont des avertissements.

5. Facultatif: Cliquez sur log.js:12 pour afficher le code ayant entraîné ce formatage du message, puis revenez à la console lorsque vous avez terminé. Faites-le chaque fois que vous souhaitez voir le code qui a entraîné la consignation 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 précédant l'appel.

   

   La trace de la pile vous indique qu'une fonction nommée logWarning a été appelée, et qu'elle a elle-même appelé 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 consigner les traces de la 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 Table de journaux. Un tableau sur les artistes célèbres est enregistré dans la console.

   

   Notez que la colonne birthday n'est remplie que pour une seule ligne. Vérifiez le code pour comprendre l'origine du problème.

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

   

10. Cliquez sur Journal personnalisé. Un message entouré d'une bordure rouge et d'un arrière-plan bleu est consigné dans la console.

    

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

Il existe encore plus de méthodes que celles présentées dans cette section. À la fin du tutoriel, vous apprendrez à explorer les autres méthodes.

Afficher les messages consignés par le navigateur

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

1. Cliquez sur Cause 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 (Cause de l'erreur). Le navigateur consigne un TypeError non détecté, car JavaScript tente de mettre à jour un nœud DOM qui n'existe pas.

   

3. Cliquez sur la liste déroulante Log Levels (Niveaux de journalisation), puis activez l'option Verbose (Détail) 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 consignez est visible. Remarque:Si le menu déroulant "Default Levels" (Niveaux par défaut) est désactivé, vous devrez peut-être fermer la barre latérale de la console. Filtrez par source du message ci-dessous pour en savoir plus sur la barre latérale de la console.

   

4. Cliquez sur Cause Violation (Cause du non-respect). 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 proposent de nombreuses façons différentes de filtrer les messages qui ne sont pas pertinents pour la tâche à accomplir.

Filtrer par niveau de journal

Chaque méthode console.* se voit attribuer 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.

Pour filtrer par niveau de journal:

1. Cliquez sur la liste déroulante Log Levels (Niveaux de journalisation) et désactivez Errors (Erreurs). Un niveau est désactivé lorsqu'il n'y a plus de coche à côté de celui-ci. Les messages de niveau Error disparaissent.

   

2. Cliquez à nouveau sur la liste déroulante Log Levels (Niveaux de journalisation), puis réactivez Errors (Erreurs). Les messages de niveau Error réapparaissent.

Filtrer par texte

Si vous souhaitez afficher uniquement les messages qui contiennent une chaîne exacte, saisissez cette chaîne dans la zone de texte Filtrer.

1. Saisissez Dave dans la zone de texte Filter (Filtre). Tous les messages qui ne contiennent pas la chaîne Dave sont masqués. Le libellé Adolescent Irradiated Espionage Tortoises peut également s'afficher. C'est un bug.

   

2. Supprimez Dave de la zone de texte Filter (Filtre). Tous les messages réapparaissent.

Filtrer par expression régulière

Lorsque 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 de texte Filter (Filtre). Saisissez ce schéma dans RegExr pour obtenir des explications.

   

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

Filtrer par source du message

Lorsque vous souhaitez afficher uniquement les messages provenant d'une URL donnée, utilisez la barre latérale.

1. Cliquez sur Show Console Sidebar (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 ayant entraîné la consignation de messages. Par exemple, log.js a provoqué 11 messages.

   

Filtrer par messages utilisateur

Précédemment, lorsque vous avez cliqué sur Log Info (Informations de journal), un script appelé console.log('Hello, Console!') permettait de consigner le message dans la console. Les messages journalisés à partir de JavaScript de ce type sont appelés messages utilisateur. En revanche, lorsque vous avez cliqué sur Cause 404, le navigateur a consigné un message au niveau Error indiquant que la ressource demandée était introuvable. Les messages de ce type 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 aux côtés de tout autre panneau

Que se passe-t-il si vous modifiez des styles, mais que vous avez besoin de consulter rapidement le journal de la console ? Utilisez le panneau.

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

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

   

Étapes suivantes

Félicitations, vous avez terminé le tutoriel. Cliquez sur Distribuer un trophée pour le recevoir.

• Consultez la documentation de référence sur 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 de l'API de la console pour en savoir plus sur toutes les méthodes console présentées dans la section Afficher les messages enregistrés à partir de JavaScript et découvrez les autres méthodes console qui n'ont pas été abordées dans ce tutoriel.
• Consultez la section Premiers pas pour découvrir tout ce que vous pouvez faire d'autre avec les outils de développement.
• Pour en savoir plus sur toutes les méthodes de format et de style console, consultez Mettre en forme et style les messages dans la console.