5 min
Ah, le debugging en JavaScript ! Qui n’a jamais ragé sur son clavier en printant du texte dans le style console.log("zefzefzef") ou console.log(F****CK") dans la console, dans le but de voir à quel moment un script plante ? Vous ? Je refuse de le croire… Mais saviez-vous qu’il existe des méthodes plus élégantes pour traquer les bugs dans notre code JS ?
Débugguer en JS
Lorsque nous exécutons du code JavaScript, la console de débogage devient souvent notre meilleur alliée. Selon l’environnement d’exécution du code, cette console se traduit par :
- Côté client : la console du navigateur, accessible via les outils de développement.
- Côté serveur : le terminal, notamment avec un [runtime comme Node.js](https://laconsole.dev/formations/node).
Si certaines options de débogage dépendent en partie de l’environnement d’exécution du JavaScript (Navigateur Firefox, Node.js…), d’autres sont intégrés au langage JavaScript, c’est le cas de l’objet console.
La célèbre méthode console.log() est le choix par défaut pour beaucoup de développeurs, mais l’objet console offre en réalité toute une gamme de méthodes statiques pour un débogage plus précis et efficace. Zoom sur les principales.
Afficher des informations
console.log()
console.log() est la méthode de base pour afficher des messages génériques dans la console.
Les messages affichés avec des console.log() n’ont pas vocation à rester dans le code, ils sont généralement supprimés aussitôt que le développeur n’en a plus besoin.
🎯 Elle est utilisée pour afficher des informations ou suivre le déroulement du code.
function sum(a, b) {
return a + b;
}
console.log(sum(3, 5));
console.warn()
La méthode console.warn() permet d’afficher des avertissements dans la console.
La plupart des messages d’avertissement sont générés par :
- Le moteur JavaScript lors du parsing ou l’exécution du code.
- Des bibliothèques et API loguent lorsqu’elles rencontrent un comportement non souhaité (utilisation de fonctionnalités obsolètes, avertissements de sécurité…).
🎯 Elle est utilisée pour attirer l’attention sur des problèmes potentiels qui pourraient ne pas nécessiter une action immédiate mais qui méritent d’être notés.
console.warn("La méthode convert() est dépréciée depuis la v2.8");
console.error()
La méthode console.error() permet d’afficher des erreurs critiques, souvent accompagnée d’une trace de la pile d’appels.
La plupart des messages d’erreurs sont générés par :
- Le moteur JavaScript lors du parsing ou l’exécution du code.
- Des bibliothèques et API loguent lorsqu’elles rencontrent des problèmes.
🎯 Elle est utilisée pour identifier les erreurs qui interrompent le fonctionnement normal du code.
console.error('Erreur de validation : données saisies non-valides');
console.info()
La méthode console.info() permet d’afficher des messages informatifs dans la console, sans caractère alarmant, contrairement à console.warn() ou console.error().
🎯 Elle est utilisée pour fournir des détails contextuels sans alerter l’utilisateur. Contrairement aux console.log() qui ont un caractère temporaire lors du débogage, les console.info() peuvent être laissés dans le code.
console.info("Version 1.2.4");
console.info("Thème : dark");
console.table()
console.table() est une méthode puissante et souvent sous-utilisée qui permet d’afficher les données sous forme de tableau.
🎯 Elle est utilisée pour afficher les informations des utilisateurs dans un format tabulaire, facilitant ainsi la visualisation et l’analyse des structures de données complexes, comme des tableaux et/ou des objets.
const users = [
{ id: 1, name: 'Alice', age: 28 },
{ id: 2, name: 'Bob', age: 34 },
{ id: 3, name: 'Charlie', age: 22 }
];
console.table(users);
On obtient alors en sortie :
index | id | name | age |
|---|---|---|---|
| 0 | 1 | Alice | 28 |
| 1 | 2 | Bob | 34 |
| 2 | 3 | Charlie | 22 |
console.table() offre également la possibilité, à travers un second argument, de spécifier quelles propriétés afficher dans le tableau et dans quel ordre.
console.table(users, ["age", "name"]);
On obtient alors en sortie :
index | age | name |
|---|---|---|
| 0 | 28 | Alice |
| 1 | 34 | Bob |
| 2 | 22 | Charlie |
Mesurer des temps d’exécution
Mesurer le temps d’exécution d’un script peut s’avérer utile afin d’optimiser les performances de votre code.
Si la méthode performance.now() de JavaScript abordée dans cet article confère une grande précision dans la mesure, l’objet console permet de calculer des temps d’exécution plus simplement.
console.time()
La méthode console.time() démarre un chronomètre pour mesurer la durée d’une opération. Chaque chronomètre doit avoir un nom unique, spécifié en argument.
console.time("chrono1");
console.timeEnd()
La méthode console.timeEnd() arrête le chronomètre dont le nom est spécifié en argument.
console.time("chrono1");
console.timeEnd("chrono1"); // => chrono1: 0.048ms
console.timeLog()
Parfois, il peut être intéressant de loguer des durée intermédiaires. Pour cela, on utilise console.timeLog().
On pourrait par exemple illustrer cela en simulant une opération coûteuse avec une boucle for tournant dans le vide, avec pour seul but de bloquer quelques secondes l’exécution du thread.
console.time("chrono1");
console.timeLog("chrono1", "⌛ Chargement des images");
for (let i = 1; i <= 5_000_000_000; i++) {}
console.timeLog("chrono1", "✅ Images chargées");
console.timeEnd("chrono1");
- Le premier argument correspond toujours au nom du timer.
- Le second argument correspond à un message permettant d’identifier le moment du log.
La console JavaScript est un outil puissant pour le débogage et l’analyse de code. En maîtrisant les différentes méthodes offertes par l’objet console, vous pouvez améliorer considérablement votre flux de travail de développement. Alors, la prochaine fois que vous vous trouverez face à un bug, pensez à utiliser ces techniques pour une résolution plus rapide et efficace. Bon débogage ! 🚀