React Academy · Leçon

Installer et ouvrir React DevTools

Configurer React DevTools dans Chrome ou Firefox et parcourir le panneau Components.

Installer et ouvrir React DevTools est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous installerez l’extension de navigateur React DevTools et apprendrez à parcourir le panneau des composants pour inspecter votre application React en cours d’exécution.

Que sont les React DevTools ?

React DevTools est une extension de navigateur qui ajoute deux nouveaux panneaux aux DevTools de Chrome et de Firefox : **Composants** (pour inspecter l’arborescence) et **Profileur** (pour mesurer les performances). Elle fonctionne avec toute application React en mode développement.

Installation de l’extension

Accédez au Chrome Web Store (ou aux modules complémentaires de Firefox) et recherchez **React Developer Tools**. Cliquez sur **Ajouter à Chrome** (ou à Firefox). L’icône React de votre barre d’outils s’allumera sur les pages qui utilisent React.

Ouverture des DevTools

Appuyez sur **F12** (ou sur Cmd+Option+I sur Mac) pour ouvrir les DevTools du navigateur. Vous verrez de nouveaux onglets intitulés **Composants** et **Profileur**, à côté d’Éléments et de Console.

Le panneau des composants

L’onglet des composants affiche l’arborescence complète des composants React de la page actuelle. Vous pouvez cliquer sur n’importe quel composant pour inspecter ses propriétés, son état, ses crochets et le fichier source qui l’a rendu.

Parcourir l’arborescence

Utilisez la zone de recherche située en haut du panneau des composants pour filtrer par nom de composant. Cliquez sur un composant dans l’arborescence pour voir ses détails sur le côté droit. Utilisez les flèches pour développer ou réduire les composants enfants.

Inspecter les propriétés en direct

Lorsque vous cliquez sur un composant, ses **propriétés** actuelles apparaissent dans le volet droit. Vous pouvez même modifier directement leurs valeurs dans les DevTools pour prévisualiser les changements de l’interface sans modifier le code source.

Inspecter l’état et les crochets

Sous les propriétés, vous verrez des **crochets** tels que l’état, l’effet, la mémorisation et la référence. Développer l’état affiche la valeur actuelle de chaque appel à useState dans ce composant.

Exigence du mode développement

React DevTools n’affiche les noms des composants que lorsque l’application s’exécute en **mode développement**. Dans les versions de production, React supprime les noms des composants pour réduire la taille des ensembles de fichiers ; vous devez donc toujours effectuer le débogage localement avec npm start ou npm run dev.

Mettre les mises à jour en évidence

Activez **Mettre en évidence les mises à jour lors du rendu des composants** dans les paramètres des DevTools (icône en forme d’engrenage). Les composants qui effectuent un nouveau rendu clignotent avec une superposition colorée, ce qui rend immédiatement visibles les rendus inutiles.

Vérification rapide

Quels sont les deux onglets que l’extension React DevTools ajoute aux outils de développement du navigateur ?

Récapitulatif

Vous avez installé React DevTools et exploré le panneau des composants. Vous pouvez désormais inspecter l’arborescence des composants, lire les propriétés et l’état en direct, modifier les valeurs sur place et mettre les nouveaux rendus en évidence, sans toucher à votre code source.

À suivre

Prochaine leçon : **Inspecter les arborescences de composants et les propriétés** — vous examinerez en détail les hiérarchies imbriquées et apprendrez à lire des structures complexes de propriétés et d’état dans la barre latérale des DevTools.

Questions Fréquemment Posées

La leçon « Installer et ouvrir React DevTools » est-elle gratuite ?

Oui — le texte complet de « Installer et ouvrir React DevTools » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Installer et ouvrir React DevTools » ?

Configurer React DevTools dans Chrome ou Firefox et parcourir le panneau Components. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Installer et ouvrir React DevTools » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Installer et ouvrir React DevTools
Inspecter les arborescences de composants et les props
Utiliser l’onglet Profiler
Déboguer les erreurs React courantes

← Retour à React Academy