Indexation des sorties de la console dans Chrome DevTools

Lors de l'utilisation de Chrome DevTools, il peut être utile de mieux contrôler la journalisation de la sortie de la console. Apprenez à utiliser console.group pour regrouper facilement du contenu associé.

Nous avons parfois besoin de plus de souplesse dans la façon dont nous manipulons la sortie de la console du navigateur. Pour cela, nous pouvons appliquer des styles définir des erreurs et des avertissements, etc. En outre, nous pouvons également grouper le contenu que nous imprimons sur la console.

Dans cet article, nous allons montrer comment pouvez indexer le contenu que nous imprimons sur la console à l’aide de console.group . Console.group crée un nouveau groupe en ligne dans la console. En conséquence, les messages de la console suivants sont indentés d'un niveau supplémentaire, jusqu'à l'appel de console.groupEnd () .

Syntaxe

La ​​syntaxe est relativement compréhensible et facile à utiliser. Vous commencez par la méthode console.group () pour indiquer que vous essayez de consigner un groupe de contenus connexes dans la console. Il prend un paramètre String label qui est simplement une étiquette décrivant le groupe.

 console .  group  ( label )  ; 

Paramètre

La ​​méthode console.group () ne prend qu'un paramètre label . Il est facultatif et ne fonctionne pas avec la méthode console.groupEnd () de fermeture, car il ferme par défaut le groupe créé récemment.

Pourquoi console.group?[19659007hnTraditionnellementl'enregistrementdesmessagesdanslaconsoleestsimpleetcompréhensibleParconséquentiln’estpasnécessaired’utiliserunecouchesupplémentairedefonctionnalitéscommeconsolegroupPrenezparexemplelajournalisationde«l'erreursurvenue»dansunefonctionderappeld'erreur

 console .  log  ( “Une erreur est survenue” ) ; 

Cela imprimera le message d'erreur sur la console. chaque fois que la fonction est appelée. C'est si simple. On pourrait donc se demander pourquoi alors avons-nous besoin de console.group (). Voici pourquoi: Pendant le développement, nous avons tendance à ne pas enregistrer que des messages String pour indiquer ce qui s’est passé dans une fonction particulière.

Prenons un autre scénario dans lequel nous voulons enregistrer les valeurs dans une boucle. La meilleure chose à faire consiste ensuite à ajouter un séparateur à la fin de chaque boucle pour séparer les valeurs de chaque itération, mais cela n’est pas encore suffisant car il n’ya pas d’étiquettes décrivant les journaux.

Avec console.group il devient très simple d'organiser correctement les données connexes et de représenter chaque groupe avec une étiquette de groupe définitive lors de la connexion à la console. Illustrons ce concept en enregistrant les données d'un élève sur la console à l'aide du console.group () :

 console .  du groupe  ( "Détails de l'étudiant" . ]) ; 
    console .  log  ( "Nom: John Doe" ) ; 
    console .  log  ( "Age: 19" ) ; 
    console .  log  ( "Classe: JS3" ) ; 
    console .  log  ( "Meilleur sujet: économie" ) ; 
console .  groupEnd  () ; 

Voyons la sortie lorsque nous l'enregistrons dans la console:

Ceci est un moyen simple pour grouper et vous connecter nos articles liés. Toutes les données concernant l’élève peuvent être enregistrées dans un seul groupe d’élèves. Et si nous voulions enregistrer les résultats de cet élève à côté de ses détails? Cela nous amène à l'imbrication.

Dans le dernier exemple, nous avons consigné les détails d'un élève sur la console à l'aide de la méthode console.group . Comme fonction supplémentaire, nous pouvons imbriquer des groupes liés, comme nous le montrerons plus loin, en ajoutant les notes de test des étudiants à son groupe de détails, comme suit:

 console .  groupe  ([19659027] "Détails de l’étudiant" ) ; 
    console .  log  ( "Nom: John Doe" ) ; 
    console .  log  ( "Age: 19" ) ; 
    console .  log  ( "Classe: JS3" ) ; 
    console .  log  ( "Meilleur sujet: économie" ) ; 
        console .  groupe  ( "Classes pour étudiants" ) ; 
        console .  log  ( "Economics: A1" ) ; 
        console .  log  ( "Maths: B2" ) ; 
        console .  log  ( "Commerce: B4" ) ; 
        console .  log  ( "Marketing: A2" ) ; 
        console .  groupEnd  () ; 
console .  groupEnd  ()  

Nous avons ainsi ajouté un autre tableau aux grades de notre précédent Détails sur les élèves ] tableau pour afficher les notes de l'étudiant à côté de ses autres détails. Connectons ce groupe à la console et voyons comment il se comporte:

Groupes réductibles

Dans certains navigateurs, plus exactement dans certaines versions récentes de la plupart des navigateurs, la fonctionnalité est intégrée par défaut aux méthodes traditionnelles console.group . Toutefois, si ce n’est pas le cas pour vous, chaque groupe peut être réduit en utilisant la méthode console.groupCollapsed () .

 console .  groupeCollapsé  ( "Détails de l'étudiant" ) ; 
      console .  log  ( "Nom: John Doe" ) ; 
      console .  log  ( "Age: 19" ) ; 
      console .  log  ( "Classe: JS3" ) ; 
      console .  log  ( "Meilleur sujet: économie" ) ; 
        console .  groupCollapsed  ( "Grades étudiants" ) ; 
        console .  log  ( "Economics: A1" ) ; 
        console .  log  ( "Maths: B2" ) ; 
        console .  log  ( "Commerce: B4" ) ; 
        console .  log  ( "Marketing: A2" ) ; 
        console .  groupEnd  () ; 
    console .  groupEnd  () ; 

Les groupes sont tous réduits par défaut lorsqu’il est enregistré dans la console. Ceci est particulièrement utile lorsque vous enregistrez une quantité considérable de données. Ainsi, vous pouvez enregistrer toutes les données en même temps et ouvrir progressivement uniquement les groupes dont vous avez besoin pour le moment. Notons le tableau ci-dessus et examinons le comportement de la console:

Conclusion

Dans cet article, nous avons montré comment utiliser la méthode console.group pour indexer des éléments connexes dans la console. Il s'agit d'une fonctionnalité très puissante qui permet aux développeurs d'organiser correctement les données associées lors de la journalisation d'éléments dans la console. Vous pouvez en apprendre beaucoup plus sur l'utilisation efficace de la console – n'hésitez pas à les consulter pour en savoir plus sur la console dans la documentation officielle .