console.log() dans React

Dans React, console.log() envoie une valeur dans la console de développement du navigateur, où vous pouvez examiner les données JavaScript pendant le débogage. Placez l’appel là où la valeur est disponible : dans un composant pour examiner ses props ou l’état du rendu courant, dans un effet pour observer l’état après sa validation, ou dans un gestionnaire d’événement pour inspecter les données saisies par l’utilisateur.

Ce que fait console.log() dans React

console.log() est une méthode JavaScript, et non une fonctionnalité de React. Elle écrit dans la console de développement les arguments que vous lui transmettez ; elle ne les affiche pas dans la page. Ouvrez les outils de développement du navigateur et sélectionnez l’onglet Console pour voir les messages. Un composant peut être rendu sans rien journaliser : un message apparaît uniquement lorsque l’exécution atteint l’appel.

Pour consulter la référence de l’API console et ses méthodes, voir la documentation de console sur MDN.

Journaliser dans la console en JavaScript

Appelez console.log() avec une chaîne, un nombre, un objet, un tableau ou plusieurs valeurs. Cet exemple JavaScript autonome envoie une chaîne de salutation dans la console de développement ; la ligne ci-dessous est le résultat affiché :

console.log("Hello, React!");

Hello, React!

Par exemple, console.log("user", user) ajoute une étiquette à un objet dans la console. Les consoles des navigateurs mettent les objets en forme pour faciliter leur inspection, mais leur affichage exact dépend du navigateur. Pour appliquer un style à un message, utilisez le spécificateur de format %c, comme dans console.log("%cImportant", "color: red; font-weight: bold") ; %c applique au texte du message la chaîne de style qui le suit. console.important() n’est pas une méthode intégrée : une fonction personnalisée devrait définir ce comportement.

Journaliser l’état d’un composant

Dans un composant fonctionnel, placez console.log(count) dans le corps du composant pour examiner la valeur de count lors de ce rendu. Le corps est réexécuté lorsque React rend le composant ; ce message peut donc apparaître de nombreuses fois. En développement, certains comportements, notamment Strict Mode, peuvent aussi provoquer des rendus supplémentaires : ne partez pas du principe qu’un seul message sera affiché par action de l’utilisateur.

Une mise à jour d’état programme un rendu ultérieur. Un log placé juste après setCount(count + 1) lit encore la valeur de count du rendu courant. Pour observer chaque valeur d’état validée, placez console.log(count) dans un effet dont [count] est une dépendance ; cet effet s’exécute également après le montage initial. Pour afficher un message propre à une transition, journalisez l’événement ou l’action qui demande la mise à jour, plutôt que d’ajouter un effet de bord dans une fonction de mise à jour d’état.

Examiner les props

Journalisez une prop dans le composant qui la reçoit. Par exemple, un composant enfant auquel on transmet user peut appeler console.log("user prop", user) dans son corps. Vous verrez ainsi la valeur fournie pour ce rendu et pourrez suivre le flux de données du parent vers l’enfant. Comme le corps du composant est réexécuté à chaque rendu, la même prop peut être journalisée plusieurs fois. Pour une donnée imbriquée, journalisez le champ précis que vous examinez afin de repérer plus facilement l’information utile.

Journaliser les données d’un événement

Ajoutez un log au gestionnaire d’événement pour examiner les données au moment où l’utilisateur interagit avec la page. Dans un gestionnaire de modification d’un champ de saisie, console.log(event.currentTarget.value) lit la valeur actuelle du champ au moment où le gestionnaire s’exécute. Si ce gestionnaire met aussi l’état à jour, la valeur de l’événement est disponible immédiatement, tandis que le nouvel état sera observable lors d’un rendu ultérieur. Un log dans le gestionnaire évite que des rendus sans rapport avec l’interaction produisent le même message.

Utiliser les logs avec prudence et les supprimer

Considérez les logs comme des aides temporaires au débogage. Avant une mise en production, recherchez et supprimez ceux qui ne sont plus utiles, en particulier les messages contenant des données personnelles, des jetons ou d’autres valeurs sensibles. Les builds de production ne suppriment pas systématiquement les appels à console.log() : cela dépend de la configuration du projet. Ne conservez des logs opérationnels que s’ils respectent la politique de journalisation de l’application.

Pour vérifier une valeur, journalisez-la à l’endroit où elle est disponible : dans le rendu ou un effet pour les données du composant, et dans un gestionnaire d’événement pour les données liées à une interaction. Pour une session de débogage plus poussée, les points d’arrêt du navigateur et React Developer Tools permettent d’examiner l’exécution et les données des composants sans ajouter de logs persistants. Vous pouvez effacer le contenu visible de la console du navigateur avec son bouton d’effacement ou en appelant console.clear(), mais cela ne supprime pas les appels de journalisation du code. Si vous vous attendez à ce que les logs soient retirés du bundle de production, vérifiez la configuration du build ; sinon, supprimez du code source les appels temporaires avant la mise en production.