Article original : Console Logging Tips – How to Debug and Understand Your Code

La journalisation console est un outil essentiel pour les développeurs afin de déboguer et comprendre le comportement de leur code.

Bien que la plupart des développeurs soient familiers avec la journalisation console de base utilisant console.log(), il existe de nombreuses autres méthodes puissantes fournies par l'objet console qui peuvent rendre le débogage plus efficace.

Dans ce guide complet, nous explorerons diverses astuces de journalisation console telles que console.table, console.group, console.assert, et plus encore. Ces astuces peuvent vous aider à organiser votre processus de débogage, visualiser des structures de données complexes, et détecter les erreurs tôt dans votre flux de développement.

Table des matières

  1. Introduction à la journalisation console
  2. Journalisation console de base
  3. Astuces avancées de journalisation console
    – [console.table](#heading-31-consoletable)
    – console.group et console.groupCollapsed
    – [console.assert](#heading-33-consoleassert)
    – console.count et console.countReset
    – console.time et console.timeEnd
    – [console.trace](#heading-36-consoletrace)
    – [console.dir](#heading-37-consoledir)
    – [console.clear](#heading-38-consoleclear)
  4. Bonnes pratiques pour la journalisation console
  5. Conclusion

1. Introduction à la journalisation console

La journalisation console est une technique utilisée par les développeurs pour afficher des messages, des variables et d'autres informations dans la console du navigateur. Cela est particulièrement utile à des fins de débogage, car cela permet aux développeurs d'inspecter l'état de leur code et de suivre son flux d'exécution.

L'objet console en JavaScript fournit diverses méthodes pour journaliser différents types d'informations. Bien que console.log() soit la méthode la plus couramment utilisée, il existe plusieurs autres méthodes qui peuvent être utilisées pour améliorer votre expérience de débogage.

2. Journalisation console de base

Avant de plonger dans les astuces avancées de journalisation console, commençons par revisiter les bases de la journalisation console en utilisant console.log(). Cette méthode accepte n'importe quel nombre d'arguments et les affiche dans la console.

const name = "Femi";

const age = 30;

console.log("Nom:", name, "Âge:", age);

Dans l'exemple ci-dessus, nous journalisons les variables name et age dans la console en utilisant console.log(). Cela affichera :

Nom: Femi Âge: 30

Vous pouvez utiliser console.log() pour journaliser des chaînes de caractères, des nombres, des booléens, des objets, des tableaux, et plus encore.

3. Astuces avancées de journalisation console

3.1 console.table

La méthode console.table() vous permet d'afficher des données tabulaires dans la console. Elle prend un tableau ou un objet en entrée et le présente sous forme de tableau.

const users = [

{ name: "Chris", age: 25 },

{ name: "Dennis", age: 15 },

{ name: "Victor", age: 17 }

];

console.table(users);

Le code ci-dessus affichera un tableau dans la console :

(index)  |  name  |  age
-------------------------
0    |  Chris  |   25
1    |  Dennis |   15
2    |  Victor |   17

console.table() est particulièrement utile lors de la manipulation de tableaux d'objets ou d'autres structures de données tabulaires.

3.2 console.group et console.groupCollapsed

Les méthodes console.group() et console.groupCollapsed() vous permettent de regrouper des messages de journalisation liés ensemble dans la console. Cela peut aider à organiser votre sortie de débogage et la rendre plus facile à comprendre.

// Démarrer un nouveau groupe de console nommé "Groupe 1"
console.group("Groupe 1");

// Journaliser des messages à l'intérieur de "Groupe 1"
console.log("Message 1");
console.log("Message 2");

// Terminer "Groupe 1"
console.groupEnd();

// Démarrer un nouveau groupe de console replié nommé "Groupe 2"
console.groupCollapsed("Groupe 2");

// Journaliser des messages à l'intérieur de "Groupe 2"
console.log("Message 3");
console.log("Message 4");

// Terminer "Groupe 2"
console.groupEnd();

Dans l'exemple ci-dessus, nous créons deux groupes de messages de journalisation. Le premier groupe est développé, tandis que le second groupe est replié par défaut. Cela aide à garder la sortie de la console organisée et facile à naviguer.

Si vous exécutez ce code dans la console de développement d'un navigateur, la sortie ressemblera à ceci :

Groupe 1
  Message 1
  Message 2
Groupe 2
  ▶ Message 3
  ▶ Message 4

Dans cet exemple, "Groupe 1" est développé par défaut, montrant les messages à l'intérieur. En revanche, "Groupe 2" est replié initialement (indiqué par le symbole ▶), et vous devez cliquer dessus pour le développer et révéler les messages à l'intérieur. Le repli de "Groupe 2" le rend visuellement plus propre dans la console, surtout lorsque vous traitez avec un grand nombre de messages de journalisation.

3.3 console.assert

La méthode console.assert() vous permet d'affirmer si une condition est vraie ou fausse. Si la condition est fausse, elle journalisera un message d'erreur dans la console.

const x = 5;

// Vérifier si la condition x === 10 est vraie, sinon, journaliser le message d'erreur
console.assert(x === 10, "x n'est pas égal à 10");

Dans ce cas, la condition vérifiée est x === 10, qui compare la valeur de la variable x à 10. Puisque la valeur de x est 5, la condition est fausse. Par conséquent, la méthode console.assert journalisera le message d'erreur dans la console.

Si vous exécutez ce code dans la console de développement d'un navigateur, vous verrez une erreur d'assertion dans la sortie de la console avec le message d'erreur spécifié :

Assertion failed: x n'est pas égal à 10

C'est une manière utile d'inclure des vérifications à l'exécution dans votre code et de journaliser des messages informatifs si certaines conditions ne sont pas remplies.

3.4 console.count et console.countReset

La méthode console.count() vous permet de compter le nombre de fois qu'un morceau particulier de code est exécuté. Vous pouvez également réinitialiser le compteur en utilisant console.countReset().

function greet() {
  // Journaliser et compter le nombre de fois que "greet" est appelé
  console.count("greet");

  // Retourner un message de salutation
  return "Bonjour !";
}

// Appeler greet() deux fois
greet();
greet();

// Réinitialiser le compteur pour "greet"
console.countReset("greet");

// Appeler greet() à nouveau
greet();

console.count("greet");: Cette ligne journalise le nombre de fois que "greet" est appelé. Le compteur est initialement à 1 lorsque greet() est appelé pour la première fois et s'incrémente à chaque appel ultérieur.

Si vous exécutez ce code dans la console de développement d'un navigateur, la sortie pourrait ressembler à ceci :

greet: 1
greet: 2
greet: 1

Les deux premiers appels à greet incrémentent le compteur, et le troisième appel, après la réinitialisation, recommence le compteur à 1. Le compteur est spécifique à l'étiquette "greet".

3.5 console.time et console.timeEnd

Les méthodes console.time() et console.timeEnd() vous permettent de mesurer le temps pris par un bloc de code pour s'exécuter.

console.time("timer");

for (let i = 0; i < 1000000; i++) {

// Une opération chronophage

}

console.timeEnd("timer");

Dans l'exemple ci-dessus,

  • console.time("timer");: Cela démarre un minuteur avec l'étiquette "timer" lorsque la boucle commence.
  • console.timeEnd("timer");: Cela arrête le minuteur étiqueté "timer" et journalise le temps écoulé dans la console.

Si vous exécutez ce code dans la console de développement d'un navigateur, la sortie ressemblera à ceci :

timer: XXms

Le "XX" sera remplacé par le temps réel pris par la boucle pour exécuter l'opération chronophage. Cette mesure est utile pour le profilage et la compréhension des performances d'un bloc de code ou d'une opération spécifique.

3.6 console.trace

La méthode console.trace() affiche une trace de la pile dans la console. Cela peut être utile à des fins de débogage pour voir la pile d'appels menant au point d'exécution actuel.

function foo() {
  // Appeler la fonction bar
  bar();
}

function bar() {
  // Journaliser une trace de la pile d'appels
  console.trace("Trace :");
}

// Appeler la fonction foo
foo();
  • Fonction foo : Appelle la fonction bar.
  • Fonction bar : Journalise une trace de la pile d'appels en utilisant console.trace.
  • foo est appelé : Cela déclenche l'appel à bar, et la trace est journalisée.

Si vous exécutez ce code dans la console de développement d'un navigateur, la sortie pourrait ressembler à ceci :

Trace :
bar @ (index):8
foo @ (index):3
(anonymous) @ (index):12

La sortie montre la pile d'appels au moment où console.trace a été appelé. Elle inclut des informations sur les fonctions dans la pile, telles que les noms des fonctions et leurs emplacements respectifs dans le code. Dans cet exemple, la pile d'appels est affichée dans l'ordre inverse, avec l'appel de fonction le plus récent en haut.

3.7 console.dir

La méthode console.dir() vous permet d'afficher une liste interactive des propriétés d'un objet JavaScript.

const obj = { name: "Chris", age: 25 };

// Afficher une liste interactive des propriétés de l'objet
console.dir(obj);

La méthode console.dir est couramment utilisée pour journaliser une représentation interactive d'un objet dans la console. Si vous exécutez ce code dans la console de développement d'un navigateur, la sortie pourrait ressembler à ceci :

Object
  age: 25
  name: "Chris"
  __proto__: Object

Cette sortie fournit une représentation visuelle des propriétés de l'objet, y compris leurs noms et valeurs. Elle montre également le prototype de l'objet (__proto__). La méthode console.dir est particulièrement utile lors de la manipulation d'objets complexes ou de structures imbriquées, car elle permet d'explorer les propriétés de l'objet de manière plus interactive que console.log.

3.8 console.clear

La méthode console.clear() efface la console de tous les messages de journalisation précédents.

console.log("Message 1");

console.clear();

console.log("Message 2");

Dans l'exemple ci-dessus, console.clear() effacera la console avant de journaliser "Message 2".

4. Bonnes pratiques pour la journalisation console

Bien que la journalisation console puisse être un outil de débogage puissant, il est important de l'utiliser judicieusement et de suivre les bonnes pratiques :

  • Éviter une journalisation excessive : Trop de messages de journalisation peuvent encombrer la console et rendre difficile la recherche d'informations pertinentes. Ne journalisez que ce qui est nécessaire pour le débogage.
  • Utiliser des messages descriptifs : Lorsque vous journalisez des messages, utilisez des étiquettes descriptives pour clarifier ce que chaque message représente.
  • Utiliser les méthodes de console judicieusement : Choisissez la méthode de console appropriée (log, table, group, etc.) en fonction du type de données que vous journalisez et de la manière dont vous souhaitez qu'elles soient affichées.
  • Supprimer le code de débogage en production : N'oubliez pas de supprimer ou de désactiver les instructions de journalisation console dans votre code de production pour éviter une surcharge inutile.

5. Conclusion

La journalisation console est un outil puissant pour déboguer le code JavaScript. En tirant parti des astuces avancées de journalisation console telles que console.table, console.group, console.assert, et autres, vous pouvez rationaliser votre processus de débogage et obtenir des informations plus approfondies sur le comportement de votre code.

Dans ce guide complet, nous avons couvert diverses astuces de journalisation console, accompagnées d'exemples démontrant comment les utiliser efficacement. En incorporant ces techniques dans votre flux de développement et en suivant les bonnes pratiques, vous pouvez devenir un développeur plus efficace.

Expérimentez avec ces astuces de journalisation console dans vos propres projets pour voir comment elles peuvent vous aider à déboguer et comprendre votre code. Bon débogage !