Broken Image Finder prohledá každý <img> a CSS background-image na stránce, detekuje nefunkční načtení (404, chyby CORS, znečištěné canvasy) a zobrazí je v přehledném seznamu. Filtrujte podle nefunkčních/všech/CSS pozadí, přeskočte a zvýrazněte každý obrázek na stránce a zkopírujte seznam nefunkčních URL pro rychlé hlášení chyb.
Nefunkční obrázky patří mezi nejviditelnější chyby na webové stránce — přesto je při QA překvapivě snadné je přehlédnout, protože selhávají tiše. Broken Image Finder je zachytí všechny. Po aktivaci nástroj projde DOM a najde každý prvek <img> (kontrolou naturalWidth / naturalHeight pro odhalení neúspěšného načtení) a každou URL CSS background-image (ověří ji novým Image(), zda se načte). Výsledky jsou kategorizovány jako OK / Broken / Loading a zobrazeny ve filtrovatelném seznamu s počty nahoře. Každá položka zobrazuje URL, typ (img nebo CSS pozadí), rozměry, pokud se načetla, a alt text, pokud je přítomen. Nefunkční obrázky jsou zvýrazněny červeně a mají tlačítko "Locate", které posune prvek do zobrazení a kolem něj bliká červený obrys. Tlačítko "Copy Broken URLs" najednou zkopíruje všechny nefunkční URL pro vložení do hlášení chyby. Funguje na libovolné stránce bez potřeby přístupu k backendovým logům — rychlá vizuální QA kontrola.
Kontroluje každý prvek <img> a každou URL background-image ve vypočítaných stylech. Data URI a blob URL jsou přeskočeny (jsou vždy platné).
Přehledné statistiky ukazují stav obrázků na stránce. Čísla se aktualizují živě, jak se dokončují asynchronní kontroly.
Přepínejte mezi záložkami Broken, All a CSS Backgrounds. Zůstaňte zaměřeni na to, co je potřeba opravit.
Klikněte na Locate u libovolného obrázku a přeskočte na jeho prvek na stránce, kolem kterého se rozbliká červené zvýraznění.
Jedno kliknutí zkopíruje seznam nefunkčních URL obrázků — vložte je do hlášení chyby nebo je sdílejte s backendovým týmem.
Omezeno na 500 kontrol CSS pozadí, aby zůstalo UI responzivní i na stránkách s velkým množstvím obsahu.
Spusťte na staging prostředí před nasazením, abyste zachytili chyby 404 vzniklé refaktoringem, přejmenováním souborů nebo migrací CDN.
Pravidelně prohledávejte živé stránky — nefunkční obrázky škodí SEO i důvěře uživatelů a často unikají automatizovaným testům.
Když editoři nahrávají obrázky, některé se nemusí nikdy dostat na finální URL. Prohledejte stránku a zachyťte mrtvé odkazy.
Pokud spoléháte na externí služby pro obrázky (avatary, přímo linkované fotografie produktů), pravidelně prohledávejte a zachyťte výpadky.
Po přesunu podkladů na nové CDN nebo úložiště prohledejte každou klíčovou stránku a ověřte, že migrace nic nerozbila.
Klikněte na ikonu Broken Images v docku DevSuite Pro. Otevře se panel a stránka se automaticky prohledá.
Statistiky v horní části panelu zobrazují Total / OK / Broken / Loading. Pokud je Broken > 0, přepněte na záložku Broken a prohlédněte si je.
Klikněte na Locate u libovolného řádku a přeskočte na jeho prvek na stránce — kolem něj se na 2 sekundy rozbliká červený obrys.
Klikněte na Copy Broken URLs a získejte celý seznam — vložte jej do ticketu, chatu nebo pro vyšetření na backendu.
Po opravách na backendu klikněte na Re-scan Page a ověřte, že se všechny obrázky nyní načítají správně.
Nainstalujte si DevSuite Pro zdarma a odemkněte 64+ vývojářských nástrojů pro svůj prohlížeč.
