Desenvolvimento front-end
Verifique breakpoints no DOM real com as larguras exatas de cada dispositivo, sem alternar o DevTools nem redimensionar janelas.
NovoPainéis de trabalho - 10 dispositivos ao mesmo tempo
Seu site, impecávelem cada iPhone.
O Viewport sobrepõe molduras de dispositivos fiéis às especificações no site que você já está vendo. Compare breakpoints lado a lado, encontre falhas de layout antes do QA e exporte capturas emolduradas ou gravações em 4K, tudo na sua própria máquina.
Qualquer site · 38 dispositivos · Configurações sincronizadas entre abas · Sem conta, sem telemetria, sem envio
Chrome Web Store★ 5.0·Mais de 5.000 usuários
Em destaqueRecomendada pelo Chrome
yourstore.com
Para quem é
Uma extensão, três formas de trabalhar
Quem constrói interfaces responsivas, quem as projeta e quem precisa provar que elas funcionam.
Design de produto
Confira espaçamento, escala tipográfica e áreas seguras em molduras precisas e exporte capturas emolduradas direto para uma spec ou apresentação.
Agências e freelancers
Prove a qualidade responsiva ao vivo numa call. Um único compartilhamento de tela mostra desktop e mobile funcionando juntos, sem dividir janelas.
Capacidades
Quatro coisas que ele faz absurdamente bem
Nada de sopa de recursos. Estas são as quatro capacidades em torno das quais toda a extensão foi construída.
Demo ao vivo
Use a extensão aqui mesmo
Este é o fluxo real: escolha um dispositivo na barra, gire, dispare uma captura, aperte gravar. A página atrás é o seu site.
yourpage.com
402 x 874/34%
Do build à aprovação
Prove que funciona antes de alguém perguntar
Qualidade responsiva é muito mais fácil de mostrar do que de descrever. O Viewport transforma uma verificação interna em algo que você entrega direto ao cliente.
Primeiros passos
Funcionando em três cliques
Sem arquivo de configuração, sem conta, sem preparar o projeto.
01
Abra qualquer página
Clique no ícone da barra. Um dispositivo aparece sobre o site real, já carregado e totalmente interativo.
02
Monte a visualização
Escolha um dispositivo, gire, redimensione e arraste para onde quiser, ou monte um painel inteiro de celulares, tablets e monitores.
03
Compare e capture
Role de forma sincronizada em todas as molduras e exporte uma captura emoldurada ou grave o percurso inteiro.
Medido, não prometido
Onde o Viewport sai na frente
Comparado com as extensões de prévia responsiva mais instaladas da Chrome Web Store.
Arquitetura local em primeiro lugar
Nada sai da sua máquina, e nós mostramos como
O Viewport não tem backend para os seus dados. Sem analytics, sem telemetria, sem código carregado remotamente. As configurações ficam em chrome.storage.local; as capturas baixam direto para o seu disco.
Para renderizar uma página dentro de uma moldura, os navegadores exigem que relaxemos X-Frame-Options e Content-Security-Policy na requisição da prévia. Limitamos isso apenas à origem visualizada (frames de terceiros mantêm suas proteções) e mostramos um aviso enquanto está ativo. Tudo é removido assim que você fecha a prévia.
A maioria das ferramentas faz isso em silêncio e para a aba inteira. Preferimos que você saiba.
Preços
Grátis para sempre. Pro quando o trabalho exigir.
O plano gratuito é uma ferramenta de verdade e sem prazo, não um teste.
Grátis
$0para sempre
- Todas as 38 molduras de dispositivo
- Até 3 dispositivos na tela
- Capturas emolduradas ilimitadas
- Gravação WebM de 2 minutos
- Janela real de reserva em sites restritivos
Pro
Mais escolhido$4.17/ mês, $50 cobrado por ano
- Tudo do Grátis, e mais:
- Painéis de 10 dispositivos e cenas salvas
- MP4 4K ilimitado, corte e velocidade
- Comparação de versões e auditorias de layout
- Limitação de rede, geolocalização e idioma
Plano gratuito, sem contaCancele quando quiserPagamento seguro pela Lemon Squeezy
Perguntas frequentes
Respostas, antes de você perguntar
As cinco perguntas que todo desenvolvedor faz antes de instalar.
Não, e nada que rode dentro de um navegador substitui. O Viewport renderiza a sua página real nas larguras de viewport exatas dos dispositivos, com client hints correspondentes, o que pega a esmagadora maioria dos problemas de layout e breakpoint. Verificações críticas de release continuam sendo em dispositivos reais.
Pare de publicar breakpoints que você nunca viu.
Adicione o Viewport ao Chrome e confira todos os dispositivos na página que você já está olhando. Grátis, sem conta e sem enviar nada.