Aujourd'hui, nous publions une note sur les fonctionnalités de l'utilisation de la console JavaScript dans les navigateurs situés en dehors de la célèbre commande
console.log() . En fait, cette commande est l'outil le plus simple pour le débogage de programmes, qui vous permet de sortir quelque chose sur la console. Cependant, la connaissance de certaines fonctionnalités de cet outil permettra à ceux qui l'utilisent d'augmenter l'efficacité du travail.
Commandes et noms de variables de la console.log ()
Le cas d'utilisation le plus simple pour
console.log() est, par exemple, de sortir une chaîne ou un objet. Par exemple, imprimez la ligne sur la console:
console.log('Is this working?');
Imaginez maintenant que vous devez sortir plusieurs objets sur la console. Par exemple - comme:
const foo = { id: 1, verified: true, color: 'green' }; const bar = { id: 2, verified: false, color: 'red' };
Il sera peut-être plus logique d'utiliser plusieurs commandes de la forme
console.log(variable) pour résoudre ce problème. Bien que les données parviennent à la console, un problème devient clair lors de leur sortie.
Jetez un œil à ce qui est affiché dans la console.
Il n'y a pas de nom de variable dans la consoleComme vous pouvez le voir, les noms de variable
foo et
bar ne sont pas là. Les objets, à l'aide de l'icône de flèche dans la partie gauche des lignes, peuvent être développés, mais même en regardant la structure interne des objets, il peut être très difficile de comprendre quel objet est affiché dans la console. Pour résoudre ce problème, les noms de propriété d'objet calculés nous aideront. À savoir, cette fonctionnalité des littéraux d'objet, qui est apparue dans ES6, vous permet d'utiliser une conception pratique de la forme suivante:
console.log({ foo, bar });
Avec cette approche, un objet arrivera à la console dont les noms de propriété seront les noms des objets variables qui doivent être affichés. De plus, cela vous permet de vous débarrasser de certains appels à
console.log() , précédemment utilisés pour afficher les objets séparément.
Commande console.table ()
Vous pouvez encore améliorer l'apparence de ce que le programme affiche dans la console en formatant le contenu des objets dans un tableau. Cela aura un bon effet sur la lisibilité des informations. À savoir, nous parlons du fait que si vous affichez des objets avec les mêmes noms de propriété ou des tableaux d'objets similaires dans la console, vous pouvez utiliser la commande
console.table() . Voici le résultat de l'exécution d'une commande de la forme
console.table({ foo, bar }) .
Commande Console.table () en actionCommande Console.group ()
Cette commande peut être utilisée si vous avez besoin de regrouper certaines données associées et de créer des structures à partir de groupes imbriqués qui augmentent la facilité d'utilisation de ces données.
De plus, cette approche peut être utilisée dans les cas où plusieurs commandes pour sortir quelque chose vers la console sont exécutées dans une certaine fonction, et il est nécessaire qu'il soit possible de distinguer clairement, en un coup d'œil, les résultats de ces commandes des autres.
Supposons que nous affichions des informations sur certains utilisateurs dans la console:
console.group('User Details'); console.log('name: John Doe'); console.log('job: Software Developer');
Voici à quoi ressemblent les résultats de ce code.
Regroupement des résultats des commandes de sortie de données sur la consoleLorsque vous utilisez la commande
console.group() , les groupes sont, par défaut, affichés sous forme développée. Pour les réduire, vous pouvez utiliser la commande
console.groupCollapsed() au lieu de cette commande. Pour afficher le contenu d'un tel groupe, vous devrez le développer à l'aide de l'icône située à gauche du nom du groupe.
Console.warn () et console.error ()
Selon la situation, les commandes
console.warn() et
console.error() peuvent être utiles pour souligner l'importance de certains messages affichés sur la console. Ils sont utilisés, respectivement, pour afficher les avertissements et les erreurs.
Avertissements et erreursPeut-être que la commande
console.info() , qui est conçue pour afficher des messages d'information, vous est également utile.
En personnalisant l'apparence des messages affichés dans la console, vous pouvez aller encore plus loin en les stylisant vous-même. Vous pouvez utiliser la directive
%c pour styliser le texte affiché dans la console. Cela peut être utile, par exemple, pour organiser une séparation visuelle des informations provenant des sous-systèmes pour accéder à certaines API, des sous-systèmes chargés du traitement des événements générés par les utilisateurs, etc. L'essentiel ici est de développer certaines règles de stylisation et de les respecter. Voici un exemple de personnalisation de l'apparence de la sortie de données vers la console:
console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered'); console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details'); console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');
Vous pouvez également configurer d'autres propriétés CSS du texte, telles que
font-size et le
font-style .
Sortie des données de style sur la consoleCommande Console.trace ()
La commande
console.trace() imprime les résultats de la trace de pile sur la console et vous permet de juger ce qui s'est passé à un point spécifique du programme pendant son exécution. Par exemple, il existe certaines méthodes qui, dans certaines situations, ne doivent être appelées qu'une seule fois, par exemple - des méthodes pour supprimer des informations de la base de données. Il est possible de vérifier si
console.trace() n'effectue réellement qu'un seul appel à cette méthode. Cette commande vous permet d'afficher des informations dans la console qui permettent de vérifier le bon fonctionnement des mécanismes internes des programmes.
Commande console.time ()
L'une des tâches importantes du développeur front-end est de fournir du code à haute vitesse. La commande
console.time() vous permet de mesurer le temps d'exécution des opérations et d'afficher ce que vous avez réussi à découvrir dans la console. Par exemple, en utilisant cette commande, nous examinons quelques cycles:
let i = 0; console.time("While loop"); while (i < 1000000) { i++; } console.timeEnd("While loop"); console.time("For loop"); for (i = 0; i < 1000000; i++) {
Jetez un œil à ce qui est entré dans la console après avoir exécuté ce code.
Résultats de l'utilisation de console.time ()Résumé
Dans cet article, nous avons examiné quelques petites choses utiles concernant la sortie de données dans la console du navigateur. Si vous ne connaissiez pas ces fonctionnalités auparavant, nous espérons que vous disposez désormais de nouveaux outils JavaScript utiles.
Chers lecteurs! Si vous développez de grands projets JavaScript, nous vous demandons de nous indiquer les moyens par lesquels vous y résolvez les problèmes de journalisation.