Bonjour, Habr! Je vous présente la traduction de l'article "Comment utiliser la console JavaScript: aller au-delà de console.log ()" par Yash Agrawal.L'une des façons les plus simples de déboguer quelque chose en JavaScript est de générer le contenu à l'aide de console.log. Mais il existe de nombreuses autres méthodes fournies par la console qui peuvent aider à améliorer le débogage.Commençons.Le cas d'utilisation le plus élémentaire consiste à générer une chaîne ou un groupe d'objets JavaScript. Assez simpleconsole.log('Is this working?');
Imaginez maintenant un scénario lorsque vous avez un tas d'objets dont vous avez besoin de sortie sur la console.const foo = { id: 1, verified: true, color: 'green};
const bar = { id: 2, verified: false, color: 'red' };
Le moyen le plus intuitif de sortir est simplement console.log (variable) plusieurs fois. Le problème devient plus apparent lorsque nous voyons comment il est affiché dans la console.
Comme vous pouvez le voir, les noms des variables ne sont pas visibles, ce qui n'est pas très pratique. Cela peut être résolu en combinant toutes les variables dans un seul fichier console.log ({foo, bar}). Cela réduit également le nombre de lignes console.log dans notre code.console.table ()
Nous pouvons passer à l'étape suivante en mettant tout cela dans un tableau pour le rendre plus lisible. Chaque fois que vous avez des objets avec des propriétés communes ou un tableau d'objets, utilisez console.table (). Ici, nous pouvons utiliser console.table ({foo, bar}) et la console affiche:
console.group ()
Il peut être utilisé lorsque vous souhaitez regrouper ou imbriquer les éléments correspondants ensemble pour pouvoir lire facilement le journal.Vous pouvez également l'utiliser lorsque vous avez plusieurs instructions de journal dans une fonction et que vous souhaitez pouvoir voir clairement la portée correspondant à chaque instruction.Par exemple, si vous enregistrez des données utilisateur:
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
console.group('Address');
console.log('Street: 123 Townsend Street');
console.log('City: San Francisco');
console.log('State: CA');
console.groupEnd();
console.groupEnd();
Vous pouvez également utiliser console.groupCollapsed () au lieu de console.group () si vous souhaitez que les groupes soient réduits par défaut. Vous devrez cliquer sur le bouton de la poignée à gauche pour développer.console.warn () & console.error ()
Selon la situation, pour rendre votre console plus lisible, vous pouvez ajouter des journaux à l'aide de console.warn () ou console.error (). Il existe également console.info (), qui affiche l'icône «i» dans certains navigateurs.
Vous pouvez aller encore plus loin en ajoutant votre propre style. Vous pouvez utiliser la directive% c pour ajouter un style à n'importe quelle instruction de journal. Cela peut être utilisé pour distinguer les appels API, les événements utilisateur, etc.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 modifier la taille de la police, le style de police et d'autres éléments CSS.
console.trace ()
console.trace () imprime la trace de la pile sur la console et affiche comment le code s'est arrêté à un certain point. Il existe certaines méthodes que vous ne souhaitez appeler qu'une seule fois, par exemple, la suppression de la base de données. console.trace () peut être utilisé pour s'assurer que le code se comporte comme nous le voulons.console.time ()
Une autre chose importante en matière de développement frontend est que le code doit être rapide. console.time () vous permet de synchroniser certaines opérations dans le code pour les tests.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++) {
J'espère que cet article a fourni des informations sur les différentes façons d'utiliser la console.