Broken Image Finder nuskaito kiekvieną <img> ir CSS background-image puslapyje, aptinka sugadintus vaizdus (404 klaidas, CORS gedimus, „tainted“ canvas'us) ir pateikia juos švariame sąraše. Filtruokite pagal sugadintus/visus/CSS fonus, peršokite prie kiekvieno vaizdo puslapyje ir paryškinkite jį, taip pat kopijuokite sugadintų URL sąrašą greitiems klaidų pranešimams.
Sugadinti vaizdai yra viena matomiausių klaidų tinklalapyje – tačiau juos netikėtai lengva praleisti QA metu, nes jie tyliai nepavyksta. Broken Image Finder juos visus pagauna. Aktyvavus įrankį, jis peržiūri DOM ieškodamas kiekvieno <img> elemento (tikrindamas naturalWidth / naturalHeight, kad aptiktų nepavykusius įkėlimus) ir kiekvieno CSS background-image URL (tikrindamas kiekvieną su nauju Image() objektu, kad patvirtintų, jog jis įkeliamas). Rezultatai suskirstomi į OK / Broken / Loading ir pateikiami filtruojamame sąraše su statistikos skaičiais viršuje. Kiekvienas įrašas rodo URL, tipą (img arba CSS bg), matmenis, jei įkeltas, ir alt tekstą, jei yra. Sugadinti vaizdai paryškinami raudonai ir turi „Locate“ mygtuką, kuris nuslenka iki elemento ir sumirksi raudonu kontūru aplink jį. Mygtukas „Copy Broken URLs“ vienu paspaudimu pasiima visus nepavykusius URL greitam kopijavimui į klaidų pranešimą. Veikia bet kuriame puslapyje be prieigos prie backend žurnalų – greitas vizualinis QA patikrinimas.
Tikrina kiekvieną <img> elementą bei kiekvieną background-image URL apskaičiuotuose stiliuose. Data URI ir blob URL praleidžiami (jie visada galiojantys).
Statistika iš karto parodo puslapio vaizdų būklę. Skaičiai atnaujinami gyvai, kol vyksta asinchroniniai tikrinimai.
Perjunkite tarp Broken, All ir CSS Backgrounds skirtukų. Susikoncentruokite ties tuo, ką reikia taisyti.
Spustelėkite Locate ant bet kurio vaizdo, kad nuslinktumėte iki jo elemento puslapyje ir sumirksėtų raudonas paryškinimas.
Vienu paspaudimu nukopijuojamas sugadintų vaizdų URL sąrašas – įklijuokite į klaidos pranešimą arba pasidalinkite su backend komanda.
Ribojama iki 500 CSS fonų nuskaitymų, kad sąsaja liktų greita turinio prisotintuose puslapiuose.
Paleiskite staging aplinkoje prieš diegimą, kad pagautumėte 404 klaidas, atsiradusias dėl refaktoringo, pervadintų išteklių ar CDN migracijos.
Periodiškai nuskaitykite gyvus puslapius – sugadinti vaizdai kenkia SEO ir naudotojų pasitikėjimui, o dažnai išvengia automatizuotų testų.
Kai redaktoriai įkelia vaizdus, kai kurie gali niekada nepasiekti galutinio URL. Nuskaitykite, kad rastumėte negaliojančias nuorodas.
Jei priklausote nuo išorinių vaizdų paslaugų (avatarai, tiesiogiai susieti produktų nuotraukos), nuskaitykite reguliariai, kad pagautumėte gedimus.
Perkėlus išteklius į naują CDN ar saugyklą, nuskaitykite kiekvieną pagrindinį puslapį, kad patvirtintumėte, jog migracija nieko nesugadino.
Spustelėkite Broken Images piktogramą DevSuite Pro doke. Atsidaro skydelis ir automatiškai nuskaito puslapį.
Skydelio viršuje esanti statistika rodo Total / OK / Broken / Loading. Jei Broken > 0, perjunkite į Broken skirtuką, kad juos pamatytumėte.
Spustelėkite Locate bet kurioje eilutėje, kad nuslinktumėte iki jos elemento puslapyje – raudonas kontūras sumirksi aplink jį 2 sekundes.
Spustelėkite Copy Broken URLs, kad pasiimtumėte pilną sąrašą – įklijuokite į bilietą, pokalbį ar backend tyrimą.
Po backend pataisymų spustelėkite Re-scan Page, kad patvirtintumėte, jog visi vaizdai dabar įkeliami teisingai.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 64+ kūrėjų įrankius savo naršyklei.
