Broken Image Finder скенира сваки <img> елемент и CSS background-image на страници, открива неуспела учитавања (404 грешке, CORS неуспехе, „загађена“ платна) и приказује их у прегледној листи. Филтрирајте по оштећеним/свим/CSS позадинама, скочите на сваку слику и истакните је на страници, и копирајте листу оштећених URL-ова за брзе пријаве грешака.
Оштећене слике су једна од најуочљивијих грешака на веб страници — а ипак се изненађујуће лако превиде током QA провере јер тихо не успевају. Broken Image Finder их све проналази. Када се активира, алат пролази кроз DOM тражећи сваки <img> елемент (проверавајући naturalWidth / naturalHeight да открије неуспела учитавања) и сваки CSS background-image URL (пробајући сваки помоћу новог Image() објекта да провери да ли се учитава). Резултати се категоришу као OK / Broken / Loading и приказују у листи која се може филтрирати, са бројчаним статистикама на врху. Свака ставка приказује URL, тип (img или CSS позадина), димензије ако је учитана, и alt текст ако постоји. Оштећене слике су истакнуте црвеном бојом и имају дугме „Locate“ које скролује до елемента и истиче га треперавим црвеним оквиром. Дугме „Copy Broken URLs“ преузима све неуспеле URL-ове одједном за копирање у пријаву грешке. Ради на било којој страници без потребе за приступом backend логовима — брза визуелна QA провера.
Проверава сваки <img> елемент плус сваки background-image URL у израчунатим стиловима. Data URI и blob URL адресе се прескачу (увек су важеће).
Статистике на први поглед показују стање слика на страници. Бројеви се уживо ажурирају како се асинхроне провере завршавају.
Пребацујте се између картица Broken, All и CSS Backgrounds. Останите фокусирани на оно што треба поправити.
Кликните Locate на било којој слици да скролујете до њеног елемента на страници и истакнете га треперавим црвеним оквиром.
Један клик копира листу оштећених URL-ова слика — налепите у пријаву грешке или поделите са backend тимом.
Ограничено на 500 скенирања CSS позадина како би интерфејс остао одзиван на страницама са пуно садржаја.
Покрените на staging окружењу пре објављивања да ухватите 404 грешке настале рефакторисањем, преименовањем ресурса или миграцијом CDN-а.
Периодично скенирајте активне странице — оштећене слике штете SEO-у и поверењу корисника, а често прођу незапажено кроз аутоматизоване тестове.
Када уредници отпремају слике, неке можда никада не стигну до финалног URL-а. Скенирајте да ухватите мртве референце.
Ако се ослањате на спољне сервисе за слике (аватари, директно повезане фотографије производа), редовно скенирајте да ухватите прекиде у раду.
Након премештања ресурса на нови CDN или bucket, скенирајте сваку важну страницу да потврдите да миграција није ништа покварила.
Кликните на икону Broken Images у DevSuite Pro доку. Отвара се панел и аутоматски скенира страницу.
Статистике на врху панела приказују Total / OK / Broken / Loading. Ако је Broken > 0, пребаците се на картицу Broken да их видите.
Кликните Locate у било ком реду да скролујете до њеног елемента на страници — црвени оквир трепери око ње 2 секунде.
Кликните Copy Broken URLs да преузмете целу листу — налепите у тикет, ћаскање или backend истрагу.
Након backend исправки, кликните Re-scan Page да потврдите да се сада све слике исправно учитавају.
Instalirajte DevSuite Pro besplatno i otključajte 64+ alata za programere za svoj pretraživač.
