Outils de développement React
Utilisez les outils de développement React pour inspecter lescomposantsReact, éditer lespropset l'état, et identifier les problèmes de performance.
Vous allez apprendre
- Comment installer les outils de développement React
Extension de navigateur
Le moyen le plus simple de déboguer les sites web construits avec React est d'installer l'extension de navigateur React Developer Tools. Elle est disponible pour plusieurs navigateurs populaires :
Maintenant, si vous visitez un site webconstruit avec React,vous verrez les panneauxComponentsetProfiler.
Safari et autres navigateurs
Pour les autres navigateurs (par exemple, Safari), installez le package npmreact-devtools :
Ensuite, ouvrez les outils de développement depuis le terminal :
Puis connectez votre site web en ajoutant la balise<script>suivante au début de l'élément<head>de votre site web :
Rechargez maintenant votre site web dans le navigateur pour le visualiser dans les outils de développement.
Mobile (React Native)
Pour inspecter les applications construites avecReact Native, vous pouvez utiliserReact Native DevTools, le débogueur intégré qui intègre profondément React Developer Tools. Toutes les fonctionnalités fonctionnent de manière identique à l'extension de navigateur, y compris la mise en évidence et la sélection des éléments natifs.
En savoir plus sur le débogage dans React Native.
Pour les versions de React Native antérieures à la 0.76, veuillez utiliser la version autonome de React DevTools en suivant le guideSafari et autres navigateursci-dessus.