Javascript: Comment identifier le fichier source d’une console.log

code site internet création

Posted by: Marie

Il arrive souvent lorsqu’on est entrain de coder ou débugger une application node, qu’on rajoute des logs un peut partout pour savoir ce que contiennent les variables (oui je sais le debugger VS code et toussa toussa).

console.log(maVariable);

Et parfois on oublie certains de ces logs qui viennent polluer l’affichage. Et misère, des pages et des pages de logs, ou alors des ` undefined qui vous narguent. Alors comment trouver la provenance de ce console.log ?

As-tu préfixé tes logs

La solution la plus simple aurait été de rajouter un préfix devant la variable et ensuite faire une recherche dans la codebase :

console.log('maVariable =>', maVariable);

Ou encore mieux utiliser le package npm debug, qui permet d’activer conditionnellement certains logs.

Encore plus avancé il est possible d’utiliser un débuggueur tel que celui de vscode et de mettre des breakspoints a tout les endroits qui vous intéressent. Vous pourrez alors inspecter le contenu de chaque variable.

Mais le mal est déjà fait alors comment faire.

Un petit orverride à la rescousse

La console offre une fonction qui permet de retrouver l’endroit ou le log à été émit et de remonter jusqu’au parents : console.trace

« Oui mais si je savais où se trouve ma trace je serais pas là. »

et bien il suffit de faire une petite modification assez simple. Rajoutez le bout de code suivant le plus tôt possible dans votre application.

console.log = console.trace;

et voilà ! tous vos logs seront maintenant tracés. Vous pouvez identifier la ligne qui vous embête et la supprimer.

Qu’est-ce que cette ligne fait ?

Tout simplement elle va utiliser une trace a chaque fois qu’un console.log est appelée. Bien entendu si vous avez utilisé un console.warn ou un console.error la marche à suivre est la même

N’oubliez pas de supprimer le hack après avoir fini, sinon vos logs vont exploser…