Extensión de Chrome que encuentra el código fuente de componentes de React

Es una extensión de Chrome que permite encontrar rápidamente el código fuente de componentes de React a partir de los elementos renderizados en el navegador.

La hice durante un estudio interno para explorar código fuente de React, con la idea de mostrar que “si lees el código fuente de React, también puedes hacer cosas como esta”. Nunca la promocioné ni la presenté formalmente, pero poco a poco varios desarrolladores de EE. UU. e India la han estado usando, así que la comparto a modo de presentación.

Después de instalar la extensión, si abres la pestaña React Code Finder en las herramientas para desarrolladores, podrás encontrar rápidamente el código del componente en tu entorno de desarrollo y abrirlo en tu IDE o editarlo.

Creo que puede ser útil para quienes, a medida que crece la escala de la app, tienen dificultades para encontrar rápidamente el código fuente a partir de los elementos renderizados; para quienes sienten que la usabilidad de la extensión react-devtools se queda corta; y para quienes quieren modificar el código en tiempo real y comprobar los cambios en el navegador.

Para instrucciones de uso más detalladas, consulta el README.md de abajo.

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

Enlace de GitHub

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

[unqocn]

Como referencia, después de publicar la extensión vi que ya existía un producto con un nombre similar, una extensión/biblioteca llamada Locatorjs.

En mi experiencia de uso personal, mi extensión me resultó un poco más cómoda, aunque también creo que puede ser simplemente porque ya estoy acostumbrado a ella jaja

Si les interesa este tipo de funcionalidad, también puede valer la pena que le echen un vistazo a ese producto.

https://www.locatorjs.com/