Pronalazač oštećenih slika pretražuje svaki <img> element i CSS background-image na stranici, otkriva neuspjela učitavanja (404, CORS greške, zaprljani canvasi) i prikazuje ih u preglednom popisu. Filtrirajte po oštećenim/svima/CSS pozadinama, skočite na svaku sliku i istaknite je na stranici te kopirajte popis oštećenih URL-ova za brze prijave grešaka.
Oštećene slike jedna su od najvidljivijih grešaka na web stranici — no iznenađujuće ih je lako propustiti tijekom QA jer tiho ne uspijevaju. Pronalazač oštećenih slika hvata ih sve. Kada se aktivira, alat prolazi kroz DOM u potrazi za svakim <img> elementom (provjeravajući naturalWidth / naturalHeight za otkrivanje neuspjelih učitavanja) i svakim CSS background-image URL-om (ispitujući svaki pomoću novog Image() objekta kako bi provjerio učitava li se). Rezultati su kategorizirani kao OK / Oštećeno / Učitavanje i prikazani u filtrabilnom popisu s brojčanim statistikama na vrhu. Svaki unos prikazuje URL, tip (img ili CSS pozadina), dimenzije ako je učitano i alt tekst ako postoji. Oštećene slike istaknute su crvenom bojom i imaju gumb "Locate" koji pomiče element u prikaz i pusti crveni okvir oko njega. Gumb "Copy Broken URLs" odjednom dohvaća sve neuspjele URL-ove za kopiranje/lijepljenje u prijavu greške. Radi na bilo kojoj stranici bez potrebe za pristupom backend zapisnicima — brza vizualna QA provjera.
Provjerava svaki <img> element te svaki background-image URL u izračunatim stilovima. Data URI-ji i blob URL-ovi se preskaču (uvijek su valjani).
Statistike na prvi pogled prikazuju stanje slika na stranici. Brojevi se ažuriraju uživo dok se asinkrone provjere rješavaju.
Prebacujte se između kartica Oštećeno, Sve i CSS pozadine. Ostanite usredotočeni na ono što treba popraviti.
Kliknite Locate na bilo kojoj slici za pomicanje na njezin element na stranici i bljesak crvenog isticanja oko nje.
Jedan klik kopira popis oštećenih URL-ova slika — zalijepite u prijavu greške ili podijelite s backend timom.
Ograničeno na 500 skeniranja CSS pozadina kako bi sučelje ostalo responzivno na stranicama s puno sadržaja.
Pokrenite na staging okruženju prije objave kako biste uhvatili 404 greške uzrokovane refaktoriranjem, preimenovanim resursima ili CDN migracijama.
Povremeno pretražujte žive stranice — oštećene slike štete SEO-u i povjerenju korisnika, a često prođu neopaženo kroz automatizirane testove.
Kada urednici prenose slike, neke možda nikad ne stignu do konačnog URL-a. Pretražite kako biste uhvatili neispravne reference.
Ako se oslanjate na vanjske servise za slike (avatari, hot-linkane fotografije proizvoda), redovito pretražujte kako biste uhvatili ispade.
Nakon premještanja resursa na novi CDN ili bucket, pretražite svaku ključnu stranicu kako biste provjerili da migracija nije ništa pokvarila.
Kliknite ikonu Broken Images u DevSuite Pro doku. Otvara se panel i automatski pretražuje stranicu.
Statistike na vrhu panela prikazuju Ukupno / OK / Oštećeno / Učitavanje. Ako je Oštećeno > 0, prebacite se na karticu Oštećeno kako biste ih vidjeli.
Kliknite Locate na bilo kojem retku za pomicanje njegovog elementa u prikaz na stranici — crveni okvir bljeska oko njega 2 sekunde.
Kliknite Copy Broken URLs za dohvaćanje cijelog popisa — zalijepite u tiket, razgovor ili backend istragu.
Nakon backend ispravaka, kliknite Re-scan Page da provjerite učitavaju li se sada sve slike ispravno.
Instalirajte DevSuite Pro besplatno i otključajte 64+ razvojnih alata za svoj preglednik.
