Capturas emdiferentes tamanhosControles de
movimento e avisosDesenvolvido em Tauri
Um site.Vários tamanhos.Uma visão completa.
Uma ferramenta própria para conferir a responsividade de cada projeto.
Um app de desktop que abre um site em oito tamanhos de tela, num Chrome de verdade, e devolve a foto e o diagnóstico de cada um.Abre um site em oito telas e devolve foto e diagnóstico.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
Capturas emdiferentes tamanhosControles de
movimento e avisosDesenvolvido em Tauri
Um site.Vários tamanhos.Uma visão completa.
Uma ferramenta própria para conferir a responsividade de cada projeto.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
Um app de desktop que abre um site em oito tamanhos de tela, num Chrome de verdade, e devolve a foto e o diagnóstico de cada um.Abre um site em oito telas e devolve foto e diagnóstico.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
A bancada
Oito telas, do celular ao monitor.
Antes de publicar um site, é preciso saber como ele fica no celular, no tablet e no computador. O app abre o mesmo site em oito tamanhos de tela reais, do Android mais comum ao monitor Full HD, e mostra todos lado a lado. Toque ou passe o mouse num aparelho para ver o tamanho dele no desenho.
A medida é largura × altura. O "@3x" diz quantas vezes a tela é mais nítida que a de um computador comum: é por isso que um texto pode parecer bom no notebook e miúdo no celular. Os quatro que já vêm marcados cobrem um celular, um tablet e dois computadores; os outros quatro entram com um clique.
Como funciona
Um Chrome de verdade, em cada tamanho.
O app não desenha uma imitação do site: ele usa o próprio Chrome do computador, abre o site no tamanho de cada aparelho e fotografa a página inteira. Cada medição passa por quatro etapas, e a tela do app mostra em qual delas cada aparelho está.
Antes de o site carregar, a janela já tem a largura, a altura e a nitidez de tela do aparelho escolhido.
- No celular e no tablet, a tela aceita toque, como no aparelho de verdade
- O site acha que está num celular (ou num computador) e mostra a versão certa
- Cada aparelho é aberto numa janela própria
O que muda o jeito de a página se comportar é combinado antes de ela começar a carregar.
- As animações de entrada vão direto para o fim
- O que só apareceria ao rolar a página já aparece
- Avisos de cookies e de idade são fechados, se você pedir
Muitas páginas só carregam imagens e textos quando alguém rola até eles. O app rola a página inteira, aos poucos, para tudo chegar.
- Espera as letras e as imagens terminarem de carregar
- Tem limite de tempo: uma página que nunca acaba não trava o app
- Volta ao topo antes da foto
A página é fotografada uma tela por vez, de cima para baixo, e as partes viram uma foto só.
- Até 40 partes por aparelho
- Depois da foto, confere se algo ficou para fora da tela ou invisível
O app não traz um navegador próprio: usa o Chrome que já está instalado. Isso deixa o programa leve, um navegador embutido somaria de 170 a 282 MB.
A foto inteira
Uma página comprida, fotografada por partes.
Uma página de site costuma ser bem mais alta que a tela. Para fotografá-la inteira, o app desce uma tela por vez, tira uma foto de cada pedaço e junta tudo. Assim a foto mostra o site do jeito que quem visita vê ao rolar, inclusive o que fica preso na tela.
As partes fotografadas
- Parte 1Posição 0 px
- Parte 2Posição 768 pxMenu do topo tirado
- Parte 3Posição 1.536 pxMenu do topo tirado
- Parte 4Posição 2.304 pxMenu do topo tirado
Os limites
- 40Partes no máximo, por aparelho
- 16.384 pxA altura máxima de uma foto que o próprio navegador consegue tirar
- 220 msDe espera em cada parte, para a tela parar antes da foto
- 2ª parte em dianteO menu que fica preso no topo sai da foto, para não aparecer repetido em todas as partes
O preparo
Sem preparo, metade da página some. Com ele, aparece tudo.
Muitos sites modernos fazem cada parte surgir com uma animação quando você rola até ela. Para quem visita, é bonito. Para uma foto automática, é um problema: a foto é tirada antes de a animação acontecer, e metade da página sai em branco. Por isso o app prepara a página antes de fotografar. Compare: a frente das lâminas é a foto sem preparo; o verso, a foto com preparo.
- 01Sem animaçõesO app pede ao site a versão sem movimento, que muitos sites já têm para quem se incomoda com animação. O conteúdo já nasce no lugar.
- 02Tudo aparece de uma vezAs partes que só surgiriam ao rolar a página são liberadas logo, e não somem de novo.
- 03Avisos fechadosJanelas de cookies, de idade e de boas-vindas que tampam o site são fechadas sozinhas, se você pedir.
- 04Tudo carregadoO app espera as letras e as imagens terminarem de carregar.
- 05Uma volta pela páginaA página é descida até o fim e volta ao topo, para carregar o que só chega quando alguém rola.
- 06Animações no fimO que ainda estiver se mexendo vai direto para a posição final antes da foto.
O diagnóstico
Cada tela volta com um diagnóstico.
Além da foto, o app confere cada tela e avisa o que encontrou. São três avisos, com os mesmos nomes que aparecem no app, no exemplo, a loja BabyShoes no Monitor Full HD voltou com um aviso.
- Sobra para o lado
sem sobra horizontalAvisa quando a página fica mais larga que a tela e cria aquela rolagem para o lado que ninguém quer no celular. - Elementos invisíveis
elementos invisiveisAvisa quando um texto ou uma imagem ficou transparente e não apareceu, e lista os oito primeiros, para achar onde está o problema. - Foto cortada
captura cortada no limite do navegadorAvisa quando a página é tão alta que a foto chegou ao limite e parou antes do fim.
Onde está o Chrome
Ele procura sozinho, em cada sistema.
Para usar o Chrome do computador, o app primeiro precisa achá-lo, e Windows, Mac e Linux guardam o navegador em lugares diferentes. O app procura sozinho, numa ordem fixa, e para no primeiro que encontrar. Escolha um sistema para ver o caminho.
- Um endereço escolhido por vocêQuem guarda o Chrome num lugar diferente pode dizer ao app onde ele está.
VISUALIZADOR_CHROME - O cadastro de programas do WindowsO lugar onde o próprio Windows anota onde o Chrome foi instalado. Procurar de outro jeito costuma achar o Edge no lugar do Chrome.
App Paths\chrome.exe - As pastas de programasProgram Files e Program Files (x86), onde o Chrome costuma ficar.
- O cadastro de programas do WindowsO lugar onde o próprio Windows anota onde o Chrome foi instalado. Procurar de outro jeito costuma achar o Edge no lugar do Chrome.
- A última tentativaO app procura o Chrome e o Chromium pelos cinco nomes que eles costumam ter, pasta por pasta.
- Achou: o caminho aparece no painel e as telas podem ser medidas.Não achou: o app explica o que instalar e oferece procurar de novo.
Cada versão do app, Windows, Mac ou Linux, leva só a busca do próprio sistema.
As tecnologias
Do que é feito, peça por peça
Um programa de Windows que abre o Chrome do próprio computador, finge ser cada aparelho e fotografa o site em todos eles. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
11tecnologias, em 3 camadas
Tela
Núcleo
Navegador
As telas
O app, da abertura ao laudo.
A tela de abertura, a bancada antes da primeira medida e a loja BabyShoes medida, nos temas claro e escuro do app. Clique numa tela para ver grande.
Ferramentas para criação e desenvolvimentoUIForge