Breakpoint Viewer

Veja qual breakpoint CSS está ativo em qualquer site. Um pequeno badge aparece no canto da página mostrando o nome do breakpoint atual, sua largura mínima e a largura real do viewport em pixels. O badge é atualizado instantaneamente conforme você redimensiona a janela do navegador.

Como funciona

Instale a extensão e abra qualquer site. Um pequeno badge aparecerá no canto da página. Ao redimensionar a janela, o badge é atualizado em tempo real para mostrar qual breakpoint está ativo no momento. Escolha um preset para o seu framework CSS ou configure seus próprios breakpoints personalizados.

Funcionalidades

• Exibe o breakpoint CSS ativo, seu valor de largura mínima e a largura atual do viewport
• Presets prontos para Tailwind CSS, Bootstrap, Bulma e Foundation
• Breakpoints personalizados com controle total sobre nomes, larguras e cores
• Posicionamento do badge em qualquer canto da página
• Lista de permissões e lista de bloqueios para controlar em quais sites o badge é exibido
• Atualização em tempo real conforme você redimensiona a janela
• Leve e sem interferência no conteúdo da página
• Funciona em qualquer site

Para quem é esta extensão

Desenvolvedores frontend e designers que criam ou testam sites responsivos. Em vez de tentar adivinhar ou verificar manualmente o seu CSS, esta extensão coloca essa informação bem na sua frente, diretamente na página.

Por que instalar

Pequena, rápida e discreta. Não requer conta e nenhum dado sai do seu navegador.