Si vous êtes développeur, vous connaissez l’importance de débugger votre code. En JavaScript, vous connaissez tous le console.log()
classique mais il faut savoir que la console JavaScript de votre navigateur est bien plus puissante qu’il n’y parait.
Voici donc plusieurs fonctions qui vous aideront à y voir plus clair lors de vos développements.
Table des matières
Les plus connues
console.log, console.warn, console.error
La plus utilisée est sans aucun doute console.log()
, c’est la fonction magique qui vous permet d’afficher le résultat d’une fonction, une variable, un texte, un « ici » lorsque vous débuggez.
La fonction console.log()
possède deux variantes, console.warn()
et console.error()
, respectivement pour les avertissements et les erreurs.
Voici donc comment s’affiche les trois fonctions dans votre console JavaScript :
Petite information supplémentaire, ces 3 fonctions peuvent prendre plusieurs paramètres à afficher, de la même manière que le var_dump() en PHP.
On peut donc écrire :
[pastacode lang= »javascript » manual= »console.log(param1%2C%20getParams()%2C%20new%20Date())%3B » message= » » highlight= » » provider= »manual »/]
console.table
Fonction que j’ai d’ailleurs découverte il y a peu et que j’utilise de plus en plus. Utile lorsque vous avez un tableau, un tableau d’objets ou un objet.
Ci-dessous un petit exemple de la praticité de cette méthode console.table()
Les fonctions méconnues mais indispensables
console.group
Fonction assez magique je dois l’avouer, console.group()
vous permet, comme son nom l’indique de grouper vos traces laissées avec un console.log()
. Fort pratique lorsque vous êtes dans une boucle, quand vous testez plusieurs fonctions en même temps ou bien lorsque vous souhaitez séparer convenablement plusieurs traces de variables différentes.
Voici plutôt
[pastacode lang= »javascript » manual= »console.group(‘Customer’)%3B%0Aconsole.log(‘name%3A%20John%20Doe’)%3B%0Aconsole.log(‘id%3A%20’%20%2B%20id)%3B%0Aconsole.groupEnd()%3B%0A%0Aconsole.group(%22Cart%20content%22)%3B%0Aconsole.group(‘Shopping%20item’)%3B%0Aconsole.log(‘Name%3A%20Dragon%20Ball%20Super%201’)%3B%0Aconsole.log(‘Author%3A%20Toyotaro%2C%20Toriyama’)%3B%0Aconsole.log(‘ISBN%3A%20978-4-08-880661-7’)%3B%0Aconsole.groupEnd()%3B%0A%0Aconsole.group(‘Shopping%20item’)%3B%0Aconsole.log(‘Name%3A%20Dragon%20Ball%20Super%202’)%3B%0Aconsole.log(‘Author%3A%20Toyotaro%2C%20Toriyama’)%3B%0Aconsole.log(‘ISBN%3A%20978-4-08-880867-3’)%3B%0Aconsole.groupEnd()%3B%0Aconsole.groupEnd()%3B » message= » » highlight= » » provider= »manual »/]
donnera dans votre console navigateur
console.time
Plus besoin de faire la différence entre deux objets dates pour connaître la durée d’éxecution d’une fonction ou d’un tour de boucle… Terminé !
Il vous suffit complement d’utiliser console.time()
pour démarrer le compteur et console.timeEnd()
pour l’arrêter et retourner le temps en microtime entre les deux.
Comme une bonne nouvelle ne vient jamais seule, vous pouvez également en déclencher plusieurs en même temps en leur donnant des noms 🙂
[pastacode lang= »javascript » manual= »const%20slowFunction%20%3D%20number%20%3D%3E%20%20%7B%0A%20%20console.time(‘slowFunction’)%3B%0A%20%20%2F%2F%20something%20slow%20or%20complex%20with%20the%20numbers.%20%0A%20%20%2F%2F%20Factorials%2C%20or%20whatever.%0A%20%20console.timeEnd(‘slowFunction’)%3B%0A%7D%0A%0Aconsole.time()%3B%0A%0Afor%20(i%20%3D%200%3B%20i%20%3C%20100%3B%20%2B%2Bi)%20%7B%0A%20%20slowFunction(i)%3B%0A%7D%0A%0Aconsole.timeEnd()%3B » message= » » highlight= » » provider= »manual »/]
console.count
Encore une fonction pratique et indispensable au quotidien. Comme son nom l’indique, console.count()
représente un compteur, que l’on peut nommer si besoin.
Dans le code suivant, on déclenche deux compteurs qui s’incrémenteront et s’afficheront à chaque tour de boucle et représentent donc un passage lorsque nous sommes sur un multiple de 5 ou une valeur impaire.
[pastacode lang= »javascript » manual= »for%20(let%20i%20%3D%200%3B%20i%20%3C%20100%3B%20i%2B%2B)%20%7B%0A%20%20%20%20if%20(i%20%25%202)%20%7B%0A%20%20%20%20%20%20%20%20console.count(‘odds’)%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(!(i%20%25%205))%20%7B%0A%20%20%20%20%20%20%20%20console.count(‘multiplesOfFive’)%3B%0A%20%20%20%20%7D%0A%7D » message= » » highlight= » » provider= »manual »/]
Ce qui donnera
N’oubliez pas, à la fin de l’utilisation de vos compteurs de faire un petit coup de console.countReset()
pour le compteur par défaut ou de console.countReset("monCompteur")
pour les réinitialiser.
Pour aller plus loin
La console JavaScript de votre navigateur regorge de fonctions utiles et indispensables à exploiter lors de vos développements ou de vos séances de débugs. Elles vous éviteront de réinventer la roue, notamment pour compter le temps d’exécution d’une fonction (moi le premier) et de gagner du temps au quotidien.
Voici plutôt :
console.assert()
console.dir()
console.trace()
console.clear()
-> indispensable lorsqu’un site affiche énormément de logs, avertissements ou erreurs sur la console.
Je vous conseille d’aller faire un tour sur ces sites / articles :
- Mozilla Developper Network : Console
- JavaScript console is more than console.log()
- Beyond console.log()
C’est tout pour aujourd’hui, j’espère que vous avez vu des nouvelles choses. Certains bouts de codes illustratifs viennent des deux articles Medium cités plus haut, je les ai légèrement simplifiés pour qu’ils soient plus lisibles mais ils correspondaient parfaitement à ce que je voulais montrer. N’hésitez pas à aller les lire également ?
Bonjour et merci pour ces informations.
Ou place t-on la console.log dans un code au milieu à la fin ?
Parce que selon l’endroit ca ne marche pas. Dans un exercice sur les boucles,
elle va avant y=y+1 pourquoi ?
Bien à vous