Messages de journal dans la console

Kayce basque

Twitter GitHub Glitch

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

Ce tutoriel est destiné à être suivi dans l'ordre. Nous partons du principe que vous comprenez les principes de base du développement Web, comme l'utilisation de JavaScript pour ajouter de l'interactivité à une page.

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

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

1. Ouvrez la démonstration.

2. Facultatif: Déplacez la démo vers une autre fenêtre. Dans cet exemple, le tutoriel est à 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 version de démonstration.

   

4. Facultatif: Placez les outils de développement sur la station d'accueil au bas de la fenêtre ou détachez-les dans une autre fenêtre.

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

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

Afficher les messages consignés à partir de JavaScript

La plupart des messages qui s'affichent 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 d'expliquer comment les consigner vous-même à l'aide 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 code JavaScript de la page a appelé console.log('Hello, Console!').

3. Revenez à la console en utilisant l'un des workflows suivants:

   • Cliquez sur l'onglet Console.
   • Appuyez sur Ctrl+[ ou Cmd+[ (Mac) jusqu'à ce que Console soit sélectionné.
   • 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. Cliquez sur le bouton Log Warning (Avertissement de journal) dans la démo. Abandon Hope All Ye Who Enter est consigné dans la console.

   

   Les messages présentés dans ce format sont des avertissements.

5. (Facultatif) Cliquez sur log.js:12 pour afficher le code qui a entraîné le formatage du message ainsi, puis revenez à la console lorsque vous avez terminé. Répétez l'opération 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, laquelle a elle-même appelée 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 consigner les traces de la pile à tout moment en appelant console.trace().

7. Cliquez sur Log Error (Erreur de journal). Le message d'erreur suivant est consigné : I'm sorry, Dave. I'm afraid I can't do that.

   

8. Cliquez sur Table de journalisation. Un tableau sur des artistes célèbres est enregistré dans la console.

   

   Notez que la colonne birthday n'est renseignée que pour une seule ligne. Examinez le code pour en comprendre la raison.

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

   

10. Cliquez sur Log Custom (Journal personnalisé). Un message avec une bordure rouge et 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 met en forme les messages différemment.

Il existe encore plus de méthodes que ce qui a été montré dans cette section. À la fin du tutoriel, vous apprendrez à explorer les autres 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 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 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 la liste déroulante Niveaux de journalisation et activez l'option Détaillé si elle est désactivée. Vous en apprendrez davantage sur le filtrage dans la section suivante. Cette opération vous permet de vous assurer que le message suivant est 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. Filtrez par source du message ci-dessous pour en savoir plus sur la barre latérale de la console.

   

4. Cliquez sur Cause Violation (Non-respect du motif). 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, vous constaterez que la console est inondée de messages. Les outils de développement proposent 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 y avez saisies y restent.

Filtrer par niveau de journal

Un niveau de gravité est attribué à chaque méthode console.*: 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 de l'API Console.

Pour filtrer par niveau de journalisation:

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é. Les messages de niveau Error disparaissent.

   

2. Cliquez de nouveau sur le menu déroulant Log Levels (Niveaux de journalisation) et réactivez Errors (Erreurs). Les messages de niveau Error réapparaissent.

Important:La console mémorise toujours le filtre de menu déroulant que vous appliquez. Elle persiste sur toutes les pages, ainsi que sur les pages, dans les outils de développement et lors de l'actualisation de Chrome. Pour appliquer rapidement un filtre temporaire, utilisez la barre latérale.

Filtrer par texte

Si vous souhaitez afficher uniquement les messages contenant une chaîne exacte, saisissez cette chaîne dans la zone de texte Filter (Filtre).

1. Saisissez Dave dans la zone de texte Filtre. Tous les messages qui n'incluent 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 Filtre. Tous les messages réapparaissent.

Filtrer par expression régulière

Lorsque vous souhaitez afficher tous les messages contenant 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 Filtre. Saisissez ce modèle dans RegExr pour obtenir des explications sur son fonctionnement.

   

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

Filtrer par source du message

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

Important:Les filtres de barre latérale sont temporaires. La console ne conserve pas ces filtres sur toutes les pages, ni sur les pages, les outils de développement et les actualisations de Chrome.

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 journalisation des messages. Par exemple, log.js a généré 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!') pour consigner le message dans la console. Les messages enregistrés à partir de JavaScript de ce type sont appelés messages utilisateur. En revanche, lorsque vous avez cliqué sur Cause 404, le navigateur a enregistré un message de niveau Error indiquant que la ressource demandée était introuvable. Ces messages sont considérés comme des messages de navigateur. Vous pouvez utiliser la barre latérale pour filtrer les messages du navigateur et n'afficher que ceux des utilisateurs.

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

   

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

Utilisez la console en même temps que n'importe quel 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. Elle présente 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 recevoir votre trophée.

• Consultez la documentation de référence sur la console pour découvrir d'autres fonctionnalités et workflows liés à l'interface utilisateur de la console.
• Consultez la documentation de référence de l'API 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 les autres fonctionnalités des outils de développement.
• Pour en savoir plus sur toutes les méthodes de format et de style console, consultez Mettre en forme et styliser les messages dans la console.