O Detector de Componentes identifica automaticamente qual framework de frontend um site está usando e revela sua árvore de componentes completa. Veja nomes de componentes React, Vue, Angular e Svelte, seus valores de props/estado e a hierarquia de aninhamento — tudo a partir de um único painel de inspeção.
Já se perguntou com qual framework um site foi construído? Ou quis ver como uma UI complexa é decomposta em componentes? O Detector de Componentes responde a ambas as perguntas instantaneamente. Ele verifica a página em busca de assinaturas específicas de framework (nós de fibra React, instâncias de componentes Vue, marcadores de zona Angular, metadados de componentes Svelte) e identifica o framework, sua versão e a árvore de componentes completa. Para React e Vue, ele vai além — mostrando props de componentes e valores de estado para que você possa entender quais dados impulsionam cada parte da UI. Clique em qualquer componente na árvore para destacar o elemento DOM correspondente na página, ou clique em um elemento na página para localizar seu componente na árvore. É como o React DevTools ou Vue DevTools, mas integrado à sua página como um painel flutuante leve.
Detecta React (incluindo Next.js, Gatsby, Remix), Vue (incluindo Nuxt), Angular, Svelte (incluindo SvelteKit), Preact, Solid e outros frameworks automaticamente. Mostra o nome do framework, o número exato da versão e o modo de renderização (lado do cliente, SSR ou híbrido).
Renderiza a hierarquia completa de componentes em uma visualização em árvore recolhível. Veja como o componente App de nível superior contém um Navbar, que contém NavLinks, que contêm componentes Link individuais. A profundidade de aninhamento e as relações pai-filho são cristalinas.
Para componentes React e Vue, visualize as props atuais e os valores de estado passados para cada componente. Veja que o componente Dashboard recebe title="Visão Geral", loading=false e columns=2. Inestimável para entender o fluxo de dados.
Clique em qualquer componente no painel da árvore para destacar seu elemento DOM correspondente na página com uma sobreposição colorida. Ou clique em qualquer elemento na página para encontrar e selecionar seu componente pai na árvore. Navegue na direção que for mais natural.
Veja o número total de componentes renderizados na página, quantos são instâncias únicas vs repetidas e quais componentes aparecem com mais frequência. Útil para entender a complexidade da página e identificar padrões de reutilização.
Detecta frameworks mesmo em builds de produção minificados. A árvore de fibras do React, os marcadores __vue__ do Vue e os atributos ng do Angular persistem no modo de produção — o Detector de Componentes os lê independentemente da configuração do build.
Visite qualquer site e saiba instantaneamente se ele foi construído com React, Vue, Angular ou Svelte — incluindo a versão exata. Combine com o Site Stack para uma auditoria tecnológica completa, incluindo informações de CDN, analytics e CMS.
Estudando como as aplicações de produção decompõem sua UI em componentes. Veja como o Stripe estrutura sua página de preços, como o Linear organiza seu dashboard ou como qualquer app bem construído separa layout, navegação e conteúdo em componentes.
Um componente não está renderizando corretamente? Inspecione suas props e estado para ver quais dados ele está realmente recebendo. Compare os valores esperados com os valores reais para identificar onde o fluxo de dados quebra — sem declarações console.log.
Preparando-se para uma entrevista de frontend? Navegue em sites de produção para ver padrões de componentes do mundo real — divisões container/presentational, uso de render props, provedores de contexto e wrappers HOC são todos visíveis na árvore de componentes.
Visite produtos similares construídos com frameworks diferentes e compare suas estruturas de componentes. Veja como um app React vs um app Vue aborda o mesmo padrão de UI — navegação, formulários, tabelas de dados, modais — e entenda as diferenças arquitetônicas.
Abra o dock flutuante do DevSuite Pro e clique no ícone do Detector de Componentes. A ferramenta verifica o DOM da página em busca de marcadores específicos do framework e constrói a árvore de componentes.
O cabeçalho do painel mostra o framework detectado (React, Vue, Angular, Svelte), sua versão e o modo de renderização. Se nenhum framework for detectado, ele relata a página como HTML/CSS/JS puro.
Expanda e recolha componentes na árvore para explorar a hierarquia. Os nomes dos componentes aparecem com sua profundidade de aninhamento indicada pelo recuo. Componentes repetidos mostram uma contagem de instâncias.
Clique em qualquer componente na árvore para ver suas props atuais e valores de estado na seção de detalhes abaixo. Para React: props, estado e hooks. Para Vue: props, dados e propriedades computadas.
Clique em qualquer componente para destacar seu elemento DOM correspondente na página com uma borda colorida e sobreposição semitransparente. Clique em um elemento na página para localizá-lo na árvore.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
