Extensão do Chrome que encontra o código-fonte de componentes React

É uma extensão do Chrome que permite encontrar rapidamente o código-fonte de componentes React a partir dos elementos renderizados no navegador.

Ela foi criada durante um estudo interno de leitura de código-fonte de React, com a ideia de mostrar que “ao ler o código-fonte do React, dá para fazer coisas assim”. Eu nunca cheguei a divulgá-la ou apresentá-la formalmente, mas, aos poucos, vários desenvolvedores nos EUA e na Índia passaram a usá-la, então resolvi compartilhá-la aqui.

Depois de instalar a extensão, ao abrir a aba React Code Finder nas ferramentas de desenvolvedor, você pode localizar rapidamente o código do componente no ambiente de desenvolvimento e abri-lo na IDE ou editá-lo.

Acho que ela pode ser útil para quem tem dificuldade de encontrar rapidamente o código-fonte com base nos elementos renderizados conforme o app cresce, para quem achou a usabilidade da extensão react-devtools insuficiente, e para quem quer editar o código em tempo real e verificar as mudanças no navegador.

Para instruções detalhadas de uso, consulte o README.md abaixo~!

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

Link do GitHub

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

[unqocn]

Só como referência, depois de publicar a extensão, vi que já existia um produto com nome semelhante, uma extensão/biblioteca parecida chamada Locatorjs!

Na minha experiência pessoal de uso, a minha extensão foi um pouco mais confortável, mas também acho que isso pode ser simplesmente porque eu já estava acostumado com ela hahaha

Se você se interessa por esse tipo de funcionalidade, acho que vale a pena dar uma olhada nesse produto também.

https://www.locatorjs.com/