Facilitando a Auditoria de CSS com Browser Variable Helper
O Browser Variable Helper é uma extensão do Chrome DevTools projetada para auxiliar desenvolvedores frontend na auditoria de CSS de páginas web. Com esta ferramenta, é possível identificar valores hardcoded, como 16px ou #fff, além de destacar valores de fallback em variáveis CSS. A extensão também sinaliza variáveis CSS indefinidas, proporcionando uma análise completa do código de estilo utilizado na página.
Os problemas detectados são apresentados com indicadores visuais diretamente na árvore DOM e no painel de CSS, com cada questão colorida e explicada. Isso facilita a limpeza de estilos, a adoção de um sistema de design baseado em tokens e a solução de problemas relacionados a variáveis. A instalação é simples e a análise é realizada localmente, garantindo a privacidade dos dados.