Como a ferramenta calcula a diferença visual?

Ela renderiza a URL nas larguras especificadas, escala as capturas para uma tela comum e mapeia as mudanças de pixels em um mapa de calor.

Posso testar páginas locais ou protegidas por login?

Não, a URL precisa ser pública e acessível pela internet para que o Chromium headless possa renderizá-la.

Quantas larguras de viewport posso testar simultaneamente?

Você pode configurar até seis larguras de viewport diferentes por execução.

O que é o tempo de espera após carregar?

É o intervalo em milissegundos que a ferramenta aguarda antes de tirar a captura, útil para esperar animações ou carregamentos dinâmicos.

A ferramenta faz comparação semântica de elementos HTML?

Não, a comparação é puramente visual baseada na renderização de pixels e métricas de layout do viewport.

Elysia Tools

Navegação

Development

Diff visual de breakpoints responsivos

Renderiza uma URL em varias larguras e mostra capturas, mapas de calor e metricas de layout na pagina.

Detalhes

O que esta ferramenta ajuda você a fazer

Chromium headless captura ate seis viewports e marca mudancas de pixels. O relatorio mostra capturas, mapas de calor, metricas e download ZIP; nao afirma correspondencia semantica de elementos.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Execuções de exemplo preparadas

Clique em um exemplo para preencher o formulário automaticamente. Arquivos ainda precisam ser enviados.

1 exemplos

O layout de cartoes muda entre 375 px e 768 px

Renderiza uma pagina responsiva de cartoes incorporada em duas larguras e baixa um ZIP com capturas, mapa de calor de pixels e relatorio de viewport.

<section><h2>Responsive visual diff</h2><p>375 px and 768 px screenshots, a 375-to-768 pixel heatmap, layout metrics, and a ZIP download.</p></section>

Entradas

Preencha os campos necessários e execute a ferramenta.

5 opções

ConteúdoCole ou digite os valores principais.2

URL do sitetextObrigatórioLarguras de viewport (px)textObrigatório

ConfiguraçõesAjuste formatos, intervalos, números e modos.3

Altura de viewport (px)numberOpcionalEspera após carregar (ms)numberOpcionalModo de comparaçãoselectOpcional

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Diff visual de breakpoints responsivos

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Verificação de Grid de Cartões Responsivo

2. Depuração de Menu de Navegação em Múltiplas Telas

Perguntas frequentes

Exemplos de Processamento de Imagem Android Java

Exemplos de Processamento de Imagem Android Kotlin

Exemplos de Processamento de Imagem Web Python

Exemplos de Processamento de Imagem Web Rust

Sincronizador de paleta Tailwind

Analisador de Complexidade de Codigo

Testador de Requisições HTTP

Explicador de Expressões Cron

Ferramentas de Diff e Comparação de Arquivos e Dados

Ferramentas de análise de texto, legibilidade e inspeção de conteúdo

Ferramentas de medicao e inspecao de audio

Ferramentas de analise estatistica, testes e distribuicoes