Broken Image Finder skaneerib iga <img> ja CSS background-image lehel, tuvastab katkised laadimised (404-d, CORS-vead, rikutud lõuendid) ja kuvab need puhtas loendis. Filtreeri katkiste/kõikide/CSS-taustade järgi, hüppa iga pildi juurde lehel ja tõsta see esile, ning kopeeri katkiste URL-ide loend kiireks vearaportiks.
Katkised pildid on üks nähtavamaid vigu veebilehel — kuid neid on QA käigus üllatavalt lihtne vahele jätta, sest need ebaõnnestuvad vaikimisi. Broken Image Finder püüab need kõik kinni. Aktiveerimisel läbib tööriist DOM-i iga <img> elemendi jaoks (kontrollides naturalWidth / naturalHeight, et tuvastada ebaõnnestunud laadimised) ja iga CSS background-image URL-i jaoks (proovides igaüht värske Image()-objektiga, et kinnitada selle laadimist). Tulemused kategoriseeritakse kui OK / Broken / Loading ja esitatakse filtreeritavas loendis koos statistikaloenditega üleval. Iga kirje näitab URL-i, tüüpi (img või CSS bg), mõõtmeid, kui laaditud, ja alt-teksti, kui olemas. Katkised pildid tõstetakse esile punasega ja neil on "Locate" nupp, mis kerib elemendi vaatevälja ja vilgutab selle ümber punast piirjoont. "Copy Broken URLs" nupp hangib korraga kõik ebaõnnestunud URL-id vearaporti jaoks kopeerimiseks-kleepimiseks. Töötab igal lehel ilma backend-logidele ligipääsu vajamata — kiire visuaalne QA-värav.
Kontrollib iga <img> elementi ning iga background-image URL-i arvutatud stiilides. Data URI-d ja blob URL-id jäetakse vahele (need on alati kehtivad).
Ühe pilguga statistika näitab lehe piltide seisukorda. Numbrid uuenevad elavalt, kui asünkroonsed kontrollid lõppevad.
Vaheta Broken, All ja CSS Backgrounds vahekaartide vahel. Jää keskendunuks sellele, mida on vaja parandada.
Klõpsa Locate mis tahes pildil, et kerida selle element lehel vaatevälja ja vilgutada selle ümber punast esiletõstet.
Üks klõps kopeerib katkiste pildi URL-ide loendi — kleebi vearaportisse või jaga backend-meeskonnaga.
Piiratud 500 CSS-tausta skaneeringuga, et hoida kasutajaliides sisurikkate lehtede puhul kiirena.
Käivita staging'is enne juurutamist, et püüda kinni ümbertegemistest, ümbernimetatud varadest või CDN-migratsioonidest tulenevad 404-d.
Skaneeri aeg-ajalt elavaid lehti — katkised pildid kahjustavad SEO-d ja kasutajate usaldust ning jäävad sageli automaattestidest märkamata.
Kui toimetajad laadivad üles pilte, ei pruugi mõned kunagi lõpp-URL-ini jõuda. Skaneeri, et püüda kinni surnud viited.
Kui tugined välistele pildisteenustele (avatarid, otselingitud tootepildid), skaneeri regulaarselt, et püüda kinni katkestused.
Pärast varade viimist uude CDN-i või hoidlasse, skaneeri iga võtmelehte, et kinnitada, et migratsioon midagi ei rikkunud.
Klõpsa DevSuite Pro dokis Broken Images ikoonil. Avaneb paneel ja skaneerib lehe automaatselt.
Paneeli ülaosa statistika näitab Total / OK / Broken / Loading. Kui Broken > 0, vaheta Broken vahekaardile, et neid näha.
Klõpsa mis tahes rea juures Locate, et kerida selle element lehel vaatevälja — punane piirjoon vilgub selle ümber 2 sekundit.
Klõpsa Copy Broken URLs, et hankida täielik loend — kleebi piletisse, vestlusesse või backend-uurimisse.
Pärast backend-parandusi klõpsa Re-scan Page, et kinnitada, et kõik pildid nüüd korrektselt laaduvad.
Paigaldage DevSuite Pro tasuta ja avage 64+ arendustööriista oma brauserile.
