Der Defekte-Bilder-Finder scannt jedes <img> und CSS-background-image auf der Seite, erkennt fehlerhafte Ladevorgänge (404er, CORS-Fehler, fehlerhafte Canvases) und zeigt sie in einer übersichtlichen Liste an. Filtern Sie nach defekt/alle/CSS-Hintergründe, springen Sie zu jedem Bild auf der Seite und kopieren Sie die Liste der defekten URLs für schnelle Fehlerberichte.
Defekte Bilder gehören zu den offensichtlichsten Fehlern auf einer Webseite — dennoch werden sie beim QA-Prozess oft übersehen, da sie stillschweigend scheitern. Der Defekte-Bilder-Finder erfasst sie alle. Wenn aktiviert, durchsucht das Tool den DOM nach jedem <img>-Element (prüft naturalWidth / naturalHeight zur Erkennung fehlerhafter Ladevorgänge) und nach jeder CSS-background-image-URL (prüft jede mit einem neuen Image()-Objekt). Die Ergebnisse werden als OK / Defekt / Lädt kategorisiert und in einer filterbaren Liste mit Statistiken dargestellt. Jeder Eintrag zeigt die URL, den Typ (img oder CSS-Hintergrund), die Abmessungen (falls geladen) und den Alt-Text (falls vorhanden). Defekte Bilder werden rot hervorgehoben und haben eine „Finden“-Schaltfläche, die das Element in den Fokus scrollt und rot aufleuchten lässt. Eine Schaltfläche „Defekte URLs kopieren“ erfasst alle fehlerhaften URLs für Bug-Reports. Funktioniert auf jeder Seite, ohne Zugriff auf Backend-Logs zu benötigen — ein schnelles QA-Tool.
Prüft jedes <img>-Element sowie jede background-image-URL in den berechneten Styles. Daten-URIs und Blob-URLs werden übersprungen (sie sind immer gültig).
Statistiken auf einen Blick zeigen den Zustand der Bilder auf der Seite. Die Zahlen werden in Echtzeit aktualisiert, während die Prüfungen abgeschlossen werden.
Wechseln Sie zwischen den Tabs Defekt, Alle und CSS-Hintergründe. Bleiben Sie auf das konzentriert, was behoben werden muss.
Klicken Sie bei einem Bild auf „Finden“, um zu dem Element auf der Seite zu scrollen und es rot aufleuchten zu lassen.
Mit nur einem Klick kopieren Sie die Liste aller defekten Bild-URLs — fügen Sie sie in einen Fehlerbericht ein oder teilen Sie sie mit dem Backend-Team.
Begrenzt auf 500 CSS-Hintergrund-Scans, um die UI auf inhaltsreichen Seiten reaktionsschnell zu halten.
Auf Staging-Umgebungen ausführen, um 404er zu finden, die durch Refactorings, umbenannte Assets oder CDN-Migrationen entstanden sind.
Scannen Sie regelmäßig Live-Seiten — defekte Bilder schaden dem SEO und dem Nutzervertrauen.
Wenn Redakteure Bilder hochladen, schaffen es einige vielleicht nie bis zur finalen URL. Scannen Sie, um tote Referenzen zu finden.
Wenn Sie auf externe Bilddienste angewiesen sind (Avatare, Produktfotos), scannen Sie regelmäßig auf Ausfälle.
Nach dem Verschieben von Assets auf ein neues CDN, scannen Sie jede wichtige Seite, um sicherzustellen, dass nichts beschädigt wurde.
Klicken Sie auf das Bild-Symbol im DevSuite Pro Dock. Ein Panel öffnet sich und scannt die Seite automatisch.
Die Statistiken oben im Panel zeigen Gesamt / OK / Defekt / Lädt. Wenn Defekt > 0, wechseln Sie zum Tab „Defekt“.
Klicken Sie in einer Zeile auf Finden, um das Element auf der Seite anzuzeigen — es blinkt für 2 Sekunden rot umrandet auf.
Klicken Sie auf Defekte URLs kopieren, um die vollständige Liste zu erhalten — fügen Sie sie in ein Ticket, einen Chat oder eine Backend-Untersuchung ein.
Klicken Sie nach Backend-Fixes auf Seite erneut scannen, um zu verifizieren, dass nun alle Bilder korrekt geladen werden.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.
