Ferramenta de Análise Visual para Componentes Frontend
Capsule Highlighter é uma extensão gratuita para o Chrome, projetada para destacar visualmente componentes de frontend e mostrar a adoção do sistema de design Capsule. Ao clicar no ícone da barra de ferramentas, os usuários podem ativar uma sobreposição que contorna e rotula componentes do Capsule, além de componentes personalizados ou PWA. Essa funcionalidade é útil para engenheiros, designers e equipes de QA que precisam diferenciar as fontes de componentes e monitorar o uso da interface do usuário em várias páginas.
A extensão também oferece um painel de cobertura que apresenta contagens por tipo, permitindo visualizar a razão de adoção entre componentes Capsule e personalizados. Além disso, os usuários podem exportar um instantâneo em JSON para auditorias. O Capsule Highlighter opera completamente no navegador, sem realizar chamadas de rede, o que garante uma experiência ágil e eficiente para o acompanhamento do progresso de migração ao longo do tempo.