Narzędzie skanuje każdy znacznik <img> oraz tła CSS (background-image) na stronie, wykrywa błędy ładowania (404, błędy CORS, uszkodzone canvasy) i wyświetla je na przejrzystej liście. Filtruj wyniki według kategorii: uszkodzone/wszystkie/tła CSS, lokalizuj i wyróżniaj każdy obraz na stronie oraz kopiuj listę niedziałających adresów URL do szybkich raportów o błędach.
Uszkodzone obrazy to jedne z najbardziej widocznych błędów na stronie, a mimo to łatwo je przeoczyć podczas testów QA, ponieważ ich błąd następuje po cichu. To narzędzie wyłapuje je wszystkie. Po aktywacji skanuje strukturę DOM w poszukiwaniu każdego elementu <img> (sprawdzając naturalWidth / naturalHeight w celu wykrycia błędów ładowania) oraz każdego adresu URL w tłach CSS (testując każdy z nich nowym obiektem Image()). Wyniki są kategoryzowane jako OK / Uszkodzone / Ładowanie i prezentowane na filtrowanej liście ze statystykami na górze. Każdy wpis zawiera adres URL, typ (img lub CSS bg), wymiary oraz tekst alternatywny (alt). Uszkodzone obrazy są wyróżnione na czerwono i posiadają przycisk „Lokalizuj”, który przewija stronę do elementu i podświetla go czerwoną ramką. Przycisk „Kopiuj uszkodzone adresy URL” pozwala zebrać wszystkie błędne linki naraz. Narzędzie działa na każdej stronie bez dostępu do logów serwera — to szybka brama kontrolna dla wizualnego QA.
Sprawdza każdy element <img> oraz każdy adres URL w background-image w obliczonych stylach. Dane Data URI i blob są pomijane (są zawsze poprawne).
Statystyki dostępne na rzut oka pokazują stan obrazów na stronie. Liczby aktualizują się na żywo w miarę kończenia testów asynchronicznych.
Przełączaj się między zakładkami: Uszkodzone, Wszystkie i Tła CSS. Skup się na tym, co wymaga naprawy.
Kliknij Lokalizuj przy dowolnym obrazie, aby przewinąć stronę do niego i podświetlić go migającą czerwoną ramką.
Jednym kliknięciem kopiujesz listę niedziałających linków — wklej ją do zgłoszenia błędu lub udostępnij zespołowi backendowemu.
Limit 500 skanów tła CSS zapewnia płynne działanie interfejsu nawet na stronach o bardzo bogatej treści.
Uruchom na środowisku testowym przed deployem, aby wyłapać błędy 404 powstałe przy refaktoryzacji, zmianie nazw plików lub migracji CDN.
Okresowo skanuj działające strony — uszkodzone obrazy szkodzą SEO i zaufaniu użytkowników, a często umykają testom automatycznym.
Gdy redaktorzy wrzucają zdjęcia, niektóre mogą nigdy nie trafić pod docelowy adres. Skanuj, aby wyłapać martwe odnośniki.
Jeśli polegasz na zewnętrznych serwisach (awatary, zdjęcia produktów z innych serwerów), skanuj regularnie, by wykryć ich awarie.
Po przeniesieniu zasobów do nowego dostawcy CDN lub kontenera (bucket), skanuj kluczowe strony, by upewnić się, że migracja niczego nie zepsuła.
Kliknij ikonę Broken Images w panelu DevSuite Pro. Panel otworzy się i automatycznie rozpocznie skanowanie strony.
Statystyki na górze pokazują ogólny stan. Jeśli liczba „Uszkodzone” jest większa niż 0, przejdź do zakładki Broken, aby je zobaczyć.
Kliknij Lokalizuj w dowolnym wierszu, aby przewinąć do elementu — czerwona ramka będzie migać wokół niego przez 2 sekundy.
Kliknij Kopiuj uszkodzone adresy URL, aby pobrać pełną listę — wklej ją do zgłoszenia (ticketu), czatu lub analizy backendowej.
Po wprowadzeniu poprawek na serwerze kliknij Re-scan Page, aby zweryfikować, czy wszystkie obrazy ładują się już poprawnie.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 64 narzędzi programistycznych dla swojej przeglądarki.
