Comment utiliser les outils de développement React

Apprenez cet outil très utile que nous devons absolument installer lors de la création d'une application React.

Un outil très utile que nous devons absolument installer lors de la construction d'une application React, comme une application Next.js par exemple, est les outils de développement React.

Disponible pour les deuxChromeetFirefox, les outils de développement React sont un instrument essentiel que vous pouvez utiliser pour inspecter une application React.

Ils fournissent un inspecteur qui révèle l'arborescence des composants React qui construit votre page, et pour chaque composant, vous pouvez aller vérifier les accessoires, l'état, les crochets et bien plus encore.

Une fois que vous avez installé les outils de développement React, vous pouvez ouvrir les outils de développement habituels du navigateur (dans Chrome, faites un clic droit dans la page, puis cliquez surInspect) et vous trouverez 2 nouveaux panneaux:ComposantsetProfiler.

Si vous déplacez la souris sur les composants, vous verrez que dans la page, le navigateur sélectionnera les pièces rendues par ce composant.

Si vous sélectionnez un composant dans l'arborescence, le panneau de droite vous montrera une référence àle composant parent, et les accessoires qui lui sont passés:

Vous pouvez facilement naviguer en cliquant sur les noms des composants.

Vous pouvez cliquer sur l'icône en forme d'œil dans la barre d'outils des outils de développement pour inspecter l'élément DOM, et également si vous utilisez la première icône, celle avec l'icône de la souris (qui se trouve commodément sous l'icône DevTools régulière similaire), vous pouvez survoler un élément dans l'interface utilisateur du navigateur pour sélectionner directement le composant React qui le rend.

Vous pouvez utiliser lebugicône pour enregistrer les données d'un composant dans la console.

C'est assez génial car une fois que les données y sont imprimées, vous pouvez cliquer avec le bouton droit de la souris sur n'importe quel élément et appuyer sur «Stocker en tant que variable globale». Par exemple ici je l'ai fait avec leurlprop, et j'ai pu l'inspecter dans la console en utilisant la variable temporaire qui lui est assignée,temp1:

UtilisantCartes sources, qui sont chargés automatiquement par Next.js en mode développement, à partir du panneau Composants, nous pouvons cliquer sur le bouton<>code et les DevTools basculeront vers le panneau Source, nous montrant le code source du composant:

LeProfilerl'onglet est encore plus génial, si possible. Cela nous permet deenregistrer une interactiondans l'application et voyez ce qui se passe. Je ne peux pas encore montrer d'exemple, car il faut au moins 2 composants pour créer une interaction, et nous n'en avons qu'un maintenant. J'en parlerai plus tard.

J'ai montré toutes les captures d'écran à l'aide de Chrome, mais les outils de développement React fonctionnent de la même manière dans Firefox:

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: