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.