O Detetor de Imagens Partidas verifica todos os elementos <img> e background-image de CSS na página, deteta carregamentos falhados (erros 404, falhas de CORS, canvas contaminados) e apresenta-os numa lista organizada. Filtre por partidas/todas/fundos CSS, salte para cada imagem na página e realce-a, e copie a lista de URLs partidos para relatórios de erros rápidos.
As imagens partidas são um dos problemas mais visíveis numa página web — no entanto, são surpreendentemente fáceis de passar despercebidas durante o controlo de qualidade porque falham silenciosamente. O Detetor de Imagens Partidas apanha-as todas. Quando ativado, a ferramenta percorre o DOM em busca de cada elemento <img> (verificando naturalWidth / naturalHeight para detetar carregamentos falhados) e cada URL de background-image de CSS (sondando cada uma com uma nova Image() para verificar o carregamento). Os resultados são categorizados como OK / Partida / A carregar e apresentados numa lista filtrável com contagens de estatísticas no topo. Cada entrada mostra o URL, tipo (img ou fundo CSS), dimensões se carregada, e texto alternativo se presente. As imagens partidas são realçadas a vermelho e têm um botão "Localizar" que desloca o elemento para a vista e pisca um contorno vermelho à sua volta. Um botão "Copiar URLs Partidos" obtém todos os URLs falhados de uma vez para copiar/colar no relatório de erros. Funciona em qualquer página sem necessitar de acesso a registos de backend — uma verificação visual rápida de controlo de qualidade.
Verifica cada elemento <img> mais cada URL de background-image nos estilos calculados. Data URIs e blob URLs são ignorados (são sempre válidos).
As estatísticas de relance mostram a saúde das imagens da página. Os números atualizam-se em direto à medida que as sondas assíncronas são resolvidas.
Alterne entre os separadores Partidas, Todas e Fundos CSS. Mantenha o foco no que precisa de ser corrigido.
Clique em Localizar em qualquer imagem para deslocar até ao seu elemento na página e piscar um realce vermelho à sua volta.
Um clique copia a lista de URLs de imagens partidas — cole num relatório de erros ou partilhe com a equipa de backend.
Limitado a 500 análises de fundo CSS para manter a interface responsiva em páginas com muito conteúdo.
Execute no staging antes do deploy para detetar erros 404 introduzidos por refatorações, recursos renomeados ou migrações de CDN.
Analise periodicamente páginas em direto — imagens partidas prejudicam o SEO e a confiança dos utilizadores, e muitas vezes escapam aos testes automatizados.
Quando os editores carregam imagens, algumas podem nunca chegar ao URL final. Analise para detetar referências inválidas.
Se depende de serviços de imagens externos (avatares, fotos de produtos por ligação direta), analise regularmente para detetar falhas.
Após mover recursos para um novo CDN ou bucket, analise cada página principal para verificar se a migração não partiu nada.
Clique no ícone de Imagens Partidas no painel do DevSuite Pro. Um painel abre-se e analisa a página automaticamente.
As estatísticas no topo do painel mostram Total / OK / Partidas / A Carregar. Se Partidas > 0, mude para o separador Partidas para as ver.
Clique em Localizar em qualquer linha para deslocar o seu elemento para a vista na página — um contorno vermelho pisca à sua volta durante 2 segundos.
Clique em Copiar URLs Partidos para obter a lista completa — cole num ticket, chat ou investigação de backend.
Após as correções no backend, clique em Reanalisar Página para verificar que todas as imagens carregam agora corretamente.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 64 ferramentas de desenvolvedor para seu navegador.
