Une extension Chrome pour retrouver le code source des composants React

Il s'agit d'une extension Chrome qui permet de retrouver rapidement le code source d'un composant React à partir d'un élément rendu dans le navigateur.

Cette extension a été créée en interne pendant une étude dédiée à l'exploration du code source React, avec l'idée suivante : « en lisant le code source de React, on peut aussi faire ce genre de choses ». Je ne l'avais jamais vraiment présentée ni promue, mais elle est utilisée discrètement par pas mal de développeurs aux États-Unis et en Inde, donc je la partage ici pour la présenter.

Après avoir installé l'extension, ouvrez l'onglet React Code Finder dans les outils de développement pour retrouver rapidement le code des composants dans votre environnement de développement, puis l'ouvrir dans votre IDE ou le modifier.

Elle pourra être utile à celles et ceux qui ont du mal à retrouver rapidement le code source à partir des éléments rendus à mesure que l'application grandit, à ceux qui trouvaient l'ergonomie de l'extension react-devtools décevante, ou encore à ceux qui veulent modifier le code en temps réel et vérifier les changements directement dans le navigateur.

Pour le mode d'emploi détaillé, consultez le README.md ci-dessous !

https://github.com/Jonghakseo/react-code-finder-extension/…

Lien GitHub

https://github.com/Jonghakseo/react-code-finder-extension
https://github.com/Jonghakseo/react-code-finder-server

[unqocn]

À titre d’information, après avoir publié l’extension, je me suis rendu compte qu’il existait déjà un produit similaire, sous forme d’extension/bibliothèque, appelé Locatorjs !

D’après mon expérience personnelle, mon extension était un peu plus pratique, mais je pense que c’est peut-être simplement parce que j’y suis plus habitué hahaha.

Si ce type de fonctionnalité vous intéresse, cela peut valoir le coup de jeter aussi un œil à ce produit.

https://www.locatorjs.com/