Broken Image Finder skannar varje <img> och CSS-bakgrundsbild (background-image) på sidan, upptäcker misslyckade laddningar (404:or, CORS-fel, kontaminerade canvas) och visar dem i en tydlig lista. Filtrera på trasiga/alla/CSS-bakgrunder, hoppa till och markera varje bild på sidan, och kopiera listan med trasiga URL:er för snabba felrapporter.
Trasiga bilder är en av de mest synliga buggarna på en webbsida — ändå är de förvånansvärt lätta att missa under QA eftersom de misslyckas tyst. Broken Image Finder fångar dem alla. Vid aktivering går verktyget igenom DOM:et efter varje <img>-element (kontrollerar naturalWidth/naturalHeight för att upptäcka misslyckade laddningar) och varje CSS background-image-URL (testar var och en med en ny Image() för att verifiera att den laddas). Resultaten kategoriseras som OK/Broken/Loading och presenteras i en filtrerbar lista med statistik högst upp. Varje post visar URL, typ (img eller CSS-bakgrund), dimensioner om den laddats samt alt-text om sådan finns. Trasiga bilder markeras i rött och har en "Locate"-knapp som skrollar elementet in i vy och blinkar med en röd kontur runt det. En "Copy Broken URLs"-knapp hämtar alla misslyckade URL:er på en gång för klipp-och-klistra i felrapporter. Fungerar på vilken sida som helst utan tillgång till backend-loggar — en snabb visuell QA-kontroll.
Kontrollerar varje <img>-element samt varje background-image-URL i beräknade stilar. Data-URI:er och blob-URL:er hoppas över (de är alltid giltiga).
Statistik i ett ögonkast visar sidans bildhälsa. Siffrorna uppdateras i realtid när asynkrona kontroller slutförs.
Växla mellan flikarna Broken, All och CSS Backgrounds. Håll fokus på det som behöver fixas.
Klicka på Locate för valfri bild för att skrolla till dess element på sidan och blinka en röd markering runt det.
Ett klick kopierar listan med trasiga bild-URL:er — klistra in i en felrapport eller dela med backend-teamet.
Begränsat till 500 CSS-bakgrundsskanningar för att hålla gränssnittet responsivt på innehållstunga sidor.
Kör på staging före driftsättning för att fånga 404:or som introducerats av refaktoreringar, omdöpta resurser eller CDN-migreringar.
Skanna livesidor regelbundet — trasiga bilder skadar SEO och användarnas förtroende, och de slinker ofta förbi automatiserade tester.
När redaktörer laddar upp bilder kan vissa aldrig nå den slutgiltiga URL:en. Skanna för att fånga döda referenser.
Om du förlitar dig på externa bildtjänster (avatarer, länkade produktbilder), skanna regelbundet för att fånga driftstopp.
Efter att resurser flyttats till en ny CDN eller bucket, skanna varje nyckelsida för att verifiera att migreringen inte förstörde något.
Klicka på Broken Images-ikonen i DevSuite Pro-docken. En panel öppnas och skannar sidan automatiskt.
Statistiken högst upp i panelen visar Total/OK/Broken/Loading. Om Broken > 0, växla till fliken Broken för att se dem.
Klicka på Locate på valfri rad för att skrolla dess element in i vy på sidan — en röd kontur blinkar runt det i 2 sekunder.
Klicka på Copy Broken URLs för att hämta hela listan — klistra in i ett ärende, chatt eller backend-utredning.
Efter backend-åtgärder, klicka på Re-scan Page för att verifiera att alla bilder nu laddas korrekt.
Installera DevSuite Pro gratis och lås upp 64+ utvecklarverktyg för din webbläsare.
