Broken Image Finder scant elke <img> en CSS background-image op de pagina, detecteert verbroken belastingen (404's, CORS-fouten, bevuilde canvassen) en toont ze in een schone lijst. Filter op verbroken/alles/CSS-achtergronden, jump naar en markeer elke afbeelding op de pagina en kopieer de lijst met verbroken URL's voor snelle bugmeldingen.
Verbroken afbeeldingen zijn een van de meest zichtbare bugs op een webpagina — maar ze zijn verrassend gemakkelijk te missen tijdens QA omdat ze stilzwijgend mislukken. Broken Image Finder vangt ze allemaal. Wanneer geactiveerd, loopt het gereedschap door de DOM voor elk <img> element (controleert naturalWidth / naturalHeight om mislukte laden te detecteren) en elke CSS background-image URL (sondeert elk met een verse Image() om te verifiëren dat het laadt). Resultaten zijn gecategoriseerd als OK / Verbroken / Laden en gepresenteerd in een filterbare lijst met stattellingen aan de bovenkant. Elk item toont de URL, type (img of CSS bg), dimensies als geladen en alt-tekst indien aanwezig. Verbroken afbeeldingen worden rood gemarkeerd en hebben een "Locate" knop die het element in beeld schuift en een rood overzicht eromheen flitst. Een knop "Verbroken URL's kopiëren" haalt alle falende URL's tegelijk op voor bugmeldingkopie/plakken. Werkt op elke pagina zonder toegang tot backend logs — een snelle visuele QA gate.
Controleert elk <img> element plus elke background-image URL in berekende stijlen. Data URI's en blob URL's worden overgeslagen (ze zijn altijd geldig).
Statistieken in één oogopslag tonen de gezondheid van de afbeeldingen van de pagina. Getallen worden live bijgewerkt wanneer asynchrone sondes worden opgelost.
Schakel tussen de tabbladen Verbroken, Alles en CSS-achtergronden. Concentreer u op wat moet worden opgelost.
Klik op Locate op elke afbeelding om naar het element op de pagina te schuiven en een rood highlight eromheen te flitsen.
Met één klik kopieert u de lijst met verbroken afbeeldings-URL's — plak deze in een bugmeldingformulier of deel met het backend team.
Begrensd tot 500 CSS-achtergrondscans om de gebruikersinterface responsief te houden op content-zware pagina's.
Voer uit op staging vóór implementatie om 404's op te vangen die door refactors, hernoemde assets of CDN-migraties zijn geïntroduceerd.
Scan periodiek live pagina's — verbroken afbeeldingen schaden SEO en gebruikersvertrouwen, en ze sluipen vaak voorbij geautomatiseerde tests.
Wanneer redacteuren afbeeldingen uploaden, kunnen sommige nooit de uiteindelijke URL bereiken. Scan om dode referenties op te vangen.
Als u afhankelijk bent van externe afbeeldingsdiensten (avatars, hotlinked productfoto's), scant u regelmatig om storingen op te vangen.
Na het verplaatsen van assets naar een nieuwe CDN of bucket, scant u elke sleutelpagina om te verifiëren dat de migratie niets heeft verbroken.
Klik op het pictogram Verbroken afbeeldingen in de DevSuite Pro dock. Een paneel wordt geopend en scant de pagina automatisch.
Statistieken aan de bovenkant van het paneel tonen Totaal / OK / Verbroken / Laden. Als Verbroken > 0, schakel over naar het tabblad Verbroken om ze te zien.
Klik op Locate in een rij om het element in beeld te schuiven op de pagina — een rood overzicht flitst 2 seconden eromheen.
Klik op Verbroken URL's kopiëren om de volledige lijst op te halen — plak in een ticket, chat of backend onderzoek.
Na backend-fixes klikt u op Pagina opnieuw scannen om te verifiëren dat alle afbeeldingen nu correct worden geladen.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
