Rikkinäisten kuvien etsijä (Broken Image Finder) skannaa jokaisen <img>-elementin ja CSS:n background-image-URL:n sivulla, havaitsee epäonnistuneet lataukset (404-virheet, CORS-epäonnistumiset, tahriintuneet kankaat) ja näyttää ne selkeässä luettelossa. Suodata rikkinäisten/kaikkien/CSS-taustojen mukaan, hyppää ja korosta jokainen kuva sivulla ja kopioi luettelo rikkinäisistä URL-osoitteista nopeita virheraportteja varten.
Rikkinäiset kuvat ovat yksi näkyvimmistä bugeista verkkosivulla — silti ne jäävät yllättävän helposti huomaamatta laadunvarmistuksessa, koska ne epäonnistuvat hiljaisesti. Rikkinäisten kuvien etsijä saa ne kaikki kiinni. Kun työkalu aktivoidaan, se käy läpi DOMin jokaisen <img>-elementin (tarkistaen naturalWidth / naturalHeight epäonnistuneiden latausten havaitsemiseksi) ja jokaisen CSS:n background-image-URL:n (tutkien jokaista uudella Image()-oliolla varmistaakseen, että se latautuu). Tulokset luokitellaan OK / Rikkinäinen / Latautuu, ja ne esitetään suodatettavassa luettelossa, jonka yläosassa on tilastot. Jokainen merkintä näyttää URL-osoitteen, tyypin (img tai CSS-tausta), mitat (jos ladattu) ja vaihtoehtoisen tekstin (jos olemassa). Rikkinäiset kuvat on korostettu punaisella ja niissä on "Paikanna"-painike, joka vierittää elementin näkyviin ja väläyttää punaisen ääriviivan sen ympärillä. "Kopioi rikkinäiset URL:t" -painike nappaa kaikki epäonnistuvat URL-osoitteet kerralla virheraportin kopiointia ja liittämistä varten. Toimii millä tahansa sivulla ilman pääsyä taustajärjestelmän lokeihin — nopea visuaalinen laadunvarmistuksen portti.
Tarkistaa jokaisen <img>-elementin sekä jokaisen background-image-URL:n lasketuissa tyyleissä. Data-URI:t ja blob-URL:t ohitetaan (ne ovat aina kelvollisia).
Yhdellä silmäyksellä näkyvät tilastot osoittavat sivun kuvien tilan. Luvut päivittyvät reaaliajassa asynkronisten koettimien ratketessa.
Vaihda Rikkinäiset-, Kaikki- ja CSS-taustat-välilehtien välillä. Keskity siihen, mikä vaatii korjaamista.
Napsauta Paikanna millä tahansa kuvalla vierittääksesi sen elementtiin sivulla ja väläyttääksesi punaisen korostuksen sen ympärillä.
Yhdellä napsautuksella kopioit luettelon rikkinäisten kuvien URL-osoitteista — liitä virheraporttiin tai jaa taustajärjestelmätiimin kanssa.
Rajoitettu 500 CSS-taustaskannaukseen käyttöliittymän pitämiseksi responsiivisena raskailla sivuilla.
Suorita staging-ympäristössä ennen käyttöönottoa saadaksesi kiinni uudelleenkirjoitusten, uudelleennimettyjen resurssien tai CDN-migraatioiden aiheuttamat 404-virheet.
Skannaa live-sivuja säännöllisesti — rikkinäiset kuvat vahingoittavat hakukoneoptimointia (SEO) ja käyttäjien luottamusta, ja ne lipsahtavat usein automaattitestien ohi.
Kun toimittajat lataavat kuvia, jotkut eivät ehkä koskaan päädy lopulliseen URL-osoitteeseen. Skannaa saadaksesi kiinni kuolleet viittaukset.
Jos luotat ulkoisiin kuvapalveluihin (avatarit, linkitetyt tuotekuvat), skannaa säännöllisesti napataksesi käyttökatkot.
Skannaa jokainen avainsivu resurssien uuteen CDN:ään tai säiliöön siirtämisen jälkeen varmistaaksesi, ettei migraatio rikkonut mitään.
Napsauta Rikkinäiset kuvat -kuvaketta DevSuite Pro -telakassa. Paneeli avautuu ja skannaa sivun automaattisesti.
Paneelin yläosan tilastot näyttävät Yhteensä / OK / Rikkinäinen / Latautuu. Jos Rikkinäinen > 0, vaihda Rikkinäiset-välilehdelle nähdäksesi ne.
Napsauta Paikanna miltä tahansa riviltä vierittääksesi sen elementin näkyviin sivulla — punainen ääriviiva välähtää sen ympärillä 2 sekunnin ajan.
Napsauta Kopioi rikkinäiset URL:t napataksesi koko luettelon — liitä tikettiin, chattiin tai taustajärjestelmän tutkintaan.
Taustajärjestelmän korjausten jälkeen napsauta Skannaa sivu uudelleen varmistaaksesi, että kaikki kuvat latautuvat nyt oikein.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 64 kehittäjätyökalua selaimellesi.
