Broken Image Finder scanner hvert <img>-element og CSS background-image på siden, registrerer fejlede indlæsninger (404'er, CORS-fejl, tainted canvases) og viser dem i en overskuelig liste. Filtrér efter ødelagte/alle/CSS-baggrunde, hop til og fremhæv hvert billede på siden, og kopiér listen af ødelagte URL'er til hurtige fejlrapporter.
Ødelagte billeder er en af de mest synlige fejl på en webside — alligevel er de overraskende nemme at overse under QA, fordi de fejler i stilhed. Broken Image Finder fanger dem alle. Når værktøjet aktiveres, gennemgår det DOM'en for hvert <img>-element (tjekker naturalWidth/naturalHeight for at registrere fejlede indlæsninger) og hver CSS background-image-URL (afprøver hver enkelt med et nyt Image()-objekt for at bekræfte, at den indlæses). Resultater kategoriseres som OK / Ødelagt / Indlæser og præsenteres i en filtrerbar liste med statistikoptællinger øverst. Hver post viser URL, type (img eller CSS-baggrund), dimensioner (hvis indlæst) og alt-tekst (hvis til stede). Ødelagte billeder fremhæves med rødt og har en "Lokalisér"-knap, der ruller elementet ind i synsfeltet og blinker med en rød kant omkring det. En "Kopiér Ødelagte URL'er"-knap henter alle fejlende URL'er på én gang til kopiering/indsætning i fejlrapporter. Fungerer på enhver side uden behov for adgang til backend-logs — en hurtig visuel QA-kontrol.
Tjekker hvert <img>-element plus hver background-image-URL i de beregnede styles. Data-URI'er og blob-URL'er springes over (de er altid gyldige).
Statistik ved et blik viser sundhedstilstanden for sidens billeder. Tallene opdateres live, mens de asynkrone tjek afsluttes.
Skift mellem fanerne Ødelagt, Alle og CSS-Baggrunde. Hold fokus på det, der skal rettes.
Klik på Lokalisér ved et hvilket som helst billede for at rulle hen til dets element på siden og blinke med en rød fremhævning omkring det.
Ét klik kopierer listen af ødelagte billed-URL'er — indsæt i en fejlrapport eller del med backend-teamet.
Begrænset til 500 CSS-baggrundsscanninger for at holde brugerfladen responsiv på indholdstunge sider.
Kør på staging før deploy for at fange 404'er, der er opstået pga. refaktoreringer, omdøbte assets eller CDN-migreringer.
Scan live-sider periodisk — ødelagte billeder skader SEO og brugertillid, og de slipper ofte forbi automatiserede tests.
Når redaktører uploader billeder, når nogle måske aldrig frem til den endelige URL. Scan for at fange døde referencer.
Hvis du er afhængig af eksterne billedtjenester (avatarer, hotlinkede produktfotos), bør du scanne jævnligt for at fange nedbrud.
Efter flytning af assets til en ny CDN eller bucket, scan hver central side for at verificere, at migreringen ikke har ødelagt noget.
Klik på ikonet Broken Images i DevSuite Pro-dockens. Et panel åbner og scanner siden automatisk.
Statistikken øverst i panelet viser Total / OK / Ødelagt / Indlæser. Hvis Ødelagt > 0, skift til fanen Ødelagt for at se dem.
Klik på Lokalisér på en hvilken som helst række for at rulle dens element ind i synsfeltet på siden — en rød kant blinker omkring det i 2 sekunder.
Klik på Kopiér Ødelagte URL'er for at hente hele listen — indsæt i en sag, en chat eller en backend-undersøgelse.
Efter backend-rettelser, klik på Genscan Side for at bekræfte, at alle billeder nu indlæses korrekt.
Installer DevSuite Pro gratis og lås op for 64+ udviklerværktøjer til din browser.
