Utiliser les React Dev Tools React Dev Tools
Les React Dev Tools (https://github.com/facebook/react-devtools)
sont une extension pour les navigateurs Firefox et Chrome (et d’autres
sous forme d’une application autonome) facilitant grandement
l’écriture et la recherche de bugs sur une application
React.
Une fois votre application lancée
dans le navigateur, il suffit d’ouvrir les outils de développement
classiques; un onglet React a
normalement été ajouté par l’extension.
Dans cet onglet, vous pouvez naviguer dans l’arbre des
composants React de l’application, et voir les éléments
générés dans le DOM :
Arbre des composants dans React Dev Tools
Mais la fonctionnalité la plus intéressante
apparaît lorsque l’on sélectionne l’un
de nos composants.
On peut alors voir dans la partie droite les
valeurs de propriétés des composants, ainsi que
le state courant :
Visualiser les propriétés
et le state des composants
Lorsque votre application ne contient pas
ce que vous attendez, le premier réflexe à avoir
devra souvent être de vérifier que vos composants
ont bien les propriétés ou state attendus. Et
pour cela les React Dev Tools vous seront bien utiles.