C-React: Visualize React Rendering of Components
O C-React é uma ferramenta de extensão do Chrome desenvolvida pela C-React que fornece uma representação visual da renderização de componentes do React. Essa ferramenta de código aberto permite aos usuários visualizar a árvore de componentes do DOM, observar padrões de renderização em páginas da web e acessar métricas de desempenho.
Ao integrar a Ferramenta de Desenvolvedor C-React ao Painel de Desenvolvedor do Chrome, os usuários podem atualizar e se comunicar dinamicamente com a página da web para visualizar as alterações nos componentes. A ferramenta também oferece métricas de desempenho para os componentes, promovendo tempos de carregamento eficientes.
Para começar, basta instalar a C-React DevTool na Chrome Web Store. Em seguida, abra sua aplicação React renderizada pelo Renderizador Personalizado da C-React. Abra as Ferramentas de Desenvolvedor do Chrome e clique no painel C-React. Conforme você navega pela página da web, a árvore de componentes será atualizada dinamicamente, fornecendo uma representação visual clara das alterações. Clicar nos nós da árvore destacará o elemento correspondente em sua página da web.
Embora a Ferramenta de Desenvolvedor C-React seja compatível com qualquer página da web, ela não exibirá os tempos de carregamento de elementos específicos nem destacará os elementos correspondentes quando um nó da árvore for clicado, a menos que a página seja renderizada pelo Renderizador Personalizado da C-React.