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-фон), розміри, якщо завантажено, і alt-текст, якщо присутній. Непрацюючі зображення підсвічені червоним і мають кнопку «Locate», яка прокручує елемент у поле зору й спалахує червоним контуром навколо нього. Кнопка «Copy Broken URLs» одразу забирає всі непрацюючі URL для копіювання у звіт про помилку. Працює на будь-якій сторінці без потреби в доступі до серверних логів — швидкий візуальний контроль якості.
Перевіряє кожен елемент <img> і кожен URL у background-image обчислених стилів. Data URI та blob URL пропускаються (вони завжди валідні).
Статистика з першого погляду показує стан зображень на сторінці. Числа оновлюються в реальному часі, поки виконуються асинхронні перевірки.
Перемикайтеся між вкладками «Непрацюючі», «Усі» та «CSS-фони». Зосередьтеся на тому, що потребує виправлення.
Натисніть «Locate» на будь-якому зображенні, щоб прокрутити до його елемента на сторінці й спалахнути червоною підсвіткою навколо нього.
Один клік копіює список непрацюючих URL зображень — вставте у звіт про помилку або поділіться з командою бекенду.
Обмежено 500 скануваннями CSS-фонів, щоб інтерфейс залишався швидким на сторінках із великою кількістю контенту.
Запустіть на staging перед деплоєм, щоб виявити помилки 404, спричинені рефакторингом, перейменуванням файлів чи міграцією CDN.
Періодично скануйте живі сторінки — непрацюючі зображення шкодять SEO та довірі користувачів, і часто непомітні для автоматизованих тестів.
Коли редактори завантажують зображення, деякі можуть так і не потрапити на кінцевий URL. Скануйте, щоб виявити нерозв'язні посилання.
Якщо ви покладаєтеся на зовнішні сервіси зображень (аватари, фото продуктів за прямим посиланням), скануйте регулярно, щоб виявити збої.
Після перенесення ресурсів на нову CDN чи сховище скануйте кожну ключову сторінку, щоб переконатися, що міграція нічого не зламала.
Натисніть іконку Broken Images у боковій панелі DevSuite Pro. Відкриється панель, і сторінка проскановується автоматично.
Статистика вгорі панелі показує Всього / OK / Непрацюючі / Завантажуються. Якщо непрацюючих більше нуля, перейдіть на вкладку «Непрацюючі», щоб їх побачити.
Натисніть «Locate» на будь-якому рядку, щоб прокрутити до його елемента на сторінці — навколо нього на 2 секунди спалахне червоний контур.
Натисніть «Copy Broken URLs», щоб отримати повний список — вставте в тикет, чат чи для розслідування командою бекенду.
Після виправлень на бекенді натисніть «Re-scan Page», щоб перевірити, що всі зображення тепер завантажуються коректно.
Встановіть DevSuite Pro безкоштовно та отримайте понад 64 інструментів розробника
