Поиск сломанных изображений сканирует каждое изображение <img> и CSS background-image на странице, обнаруживает сломанные загрузки (404s, отказы CORS, загрязненные холсты) и показывает их в чистом списке. Фильтруйте по broken/all/CSS backgrounds, переходите и выделяйте каждое изображение на странице и скопируйте список неработающих URL для быстрых отчетов об ошибках.
Сломанные изображения — одна из наиболее видимых ошибок на веб-странице — тем не менее они удивительно легко пропустить во время QA, потому что они молча не работают. Поиск сломанных изображений ловит их все. При активировании инструмент проходит DOM для каждого элемента <img> (проверяя naturalWidth / naturalHeight для обнаружения неудачных загрузок) и каждого URL CSS background-image (проверяя каждый с помощью свежего Image() для проверки того, что он загружается). Результаты категоризированы как OK / Broken / Loading и представлены в фильтруемом списке со счетами статистики вверху. Каждая запись показывает URL, тип (img или CSS bg), размеры, если загружены, и альтернативный текст, если присутствует. Сломанные изображения выделены красным и имеют кнопку «Locate», которая прокручивает элемент в представление и мигает красной чертой вокруг него. Кнопка «Copy Broken URLs» получает все неработающие URL сразу для копирования/вставки в отчет об ошибке. Работает на любой странице без необходимости доступа к журналам бэкэнда — быстрые ворота визуального QA.
Проверяет каждый элемент <img> плюс каждый URL background-image в вычисленных стилях. Data URIs и blob URLs пропускаются (они всегда действительны).
Статистика с одного взгляда показывает состояние изображений на странице. Числа обновляются в реальном времени по мере разрешения асинхронных зондов.
Переключайтесь между вкладками Broken, All и CSS Backgrounds. Оставайтесь сосредоточены на том, что требует исправления.
Щелкните Locate на любом изображении, чтобы прокрутить его элемент на странице и мигнуть красной подсветкой вокруг него.
Один щелчок копирует список сломанных URL изображений — вставьте в отчет об ошибке или поделитесь с командой бэкэнда.
Ограничено 500 сканированиями CSS-фона, чтобы сохранить отзывчивость пользовательского интерфейса на страницах, насыщенных контентом.
Запустите на постановке перед развертыванием, чтобы поймать 404s, введенные рефакторингом, переименованием активов или миграциями CDN.
Периодически сканируйте живые страницы — сломанные изображения наносят вред SEO и доверию пользователя и часто проходят мимо автоматизированных тестов.
Когда редакторы загружают изображения, некоторые могут никогда не попасть на финальный URL. Сканируйте, чтобы поймать мертвые ссылки.
Если вы полагаетесь на внешние сервисы изображений (аватары, горячо связанные фотографии продуктов), сканируйте регулярно, чтобы поймать сбои.
После перемещения активов на новый CDN или ведро, сканируйте каждую ключевую страницу, чтобы убедиться, что миграция не сломала ничего.
Щелкните значок сломанных изображений в панели DevSuite Pro. Панель откроется и автоматически просканирует страницу.
Статистика вверху панели показывает всего / OK / Broken / Loading. Если Broken > 0, переключитесь на вкладку Broken, чтобы увидеть их.
Щелкните Locate в любой строке, чтобы прокрутить его элемент в представление на странице — красная чертка мигает вокруг него на 2 секунды.
Щелкните копирование сломанных URL, чтобы получить полный список — вставьте в тикет, чат или расследование бэкэнда.
После исправлений бэкэнда щелкните повторное сканирование страницы, чтобы проверить, что все изображения теперь загружаются правильно.
Установите DevSuite Pro бесплатно и разблокируйте более 64 инструментов разработчика для вашего браузера.
