Broken Image Finder сканира всеки <img> и CSS background-image на страницата, открива неуспешни зареждания (404 грешки, CORS провали, замърсени canvas-и) и ги показва в чист списък. Филтрирайте по счупени/всички/CSS фонове, отидете до и маркирайте всяко изображение на страницата и копирайте списъка със счупени URL адреси за бърз доклад за грешка.
Счупените изображения са един от най-видимите бъгове на уеб страница — но е изненадващо лесно да бъдат пропуснати по време на QA, защото се провалят тихо. Broken Image Finder ги улавя всичките. При активиране инструментът обхожда DOM-а за всеки елемент <img> (проверявайки naturalWidth / naturalHeight, за да открие неуспешни зареждания) и всеки URL от CSS background-image (проверявайки всеки с нов Image(), за да потвърди, че се зарежда). Резултатите се категоризират като OK / Broken / Loading и се представят в списък с филтри и статистика в горната част. Всеки запис показва URL, тип (img или CSS bg), размери, ако е зареден, и alt текст, ако присъства. Счупените изображения се маркират в червено и имат бутон "Locate", който скролира елемента във видимата зона и проблясва с червен контур около него. Бутон "Copy Broken URLs" взема всички неуспешни URL адреси наведнъж за копиране/поставяне в доклад за грешка. Работи на всяка страница без нужда от достъп до бекенд логове — бърз визуален QA контролен пункт.
Проверява всеки елемент <img> плюс всеки URL от background-image в изчислените стилове. Data URI и blob URL се пропускат (винаги са валидни).
Статистиката на един поглед показва здравословното състояние на изображенията на страницата. Числата се актуализират в реално време, докато асинхронните проверки приключват.
Превключвайте между разделите Broken, All и CSS Backgrounds. Останете фокусирани върху това, което трябва да се поправи.
Кликнете Locate върху всяко изображение, за да скролирате до неговия елемент на страницата и да проблесне червен маркер около него.
Едно кликване копира списъка със счупени URL адреси на изображения — поставете в доклад за грешка или споделете с бекенд екипа.
Ограничено до 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, за да вземете целия списък — поставете в билет, чат или разследване на бекенда.
След поправки на бекенда, кликнете Re-scan Page, за да потвърдите, че всички изображения вече се зареждат правилно.
Инсталирайте DevSuite Pro безплатно и отключете 64+ инструмента за разработчици за вашия браузър.
