Kırık Görsel Bulucu, sayfadaki her <img> etiketini ve CSS background-image değerini tarar, yükleme hatalarını (404'ler, CORS hataları vb.) tespit eder ve bunları temiz bir liste halinde sunar. Kırık/tümü/CSS arka planları şeklinde filtreleyin, her bir görsele sayfada odaklanın ve hata raporları için kırık URL listesini kopyalayın.
Kırık görseller, bir web sayfasındaki en belirgin hatalardan biridir; ancak sessizce başarısız oldukları için QA (Kalite Kontrol) sırasında gözden kaçmaları şaşırtıcı derecede kolaydır. Kırık Görsel Bulucu hepsini yakalar. Araç etkinleştirildiğinde, her <img> öğesi için DOM'u tarar (yükleme hatasını tespit etmek için naturalWidth / naturalHeight değerlerini kontrol eder) ve her CSS background-image URL'sini inceler. Sonuçlar; Tamam / Kırık / Yükleniyor olarak kategorize edilir ve en üstte istatistiksel sayılarla birlikte filtrelenebilir bir listede sunulur. Her giriş; URL'yi, türü (img veya CSS bg), yüklenmişse boyutları ve varsa alt metni gösterir. Kırık görseller kırmızıyla vurgulanır ve ilgili öğeye kaydırıp etrafında kırmızı bir çerçeve flaşı yakan bir "Konumlandır" (Locate) butonuna sahiptir. "Kırık URL'leri Kopyala" butonu, tüm hatalı URL'leri hata raporuna yapıştırmanız için tek seferde kopyalar. Arka uç günlüklerine erişime gerek kalmadan her sayfada çalışır; hızlı bir görsel QA denetimidir.
Hesaplanmış stillerdeki her <img> öğesini ve her background-image URL'sini kontrol eder. Veri URI'leri ve blob URL'leri (her zaman geçerli oldukları için) atlanır.
Bir bakışta istatistikler, sayfa görsellerinin durumunu gösterir. Sayılar, asenkron kontroller tamamlandıkça canlı olarak güncellenir.
Kırık, Tümü ve CSS Arka Planları sekmeleri arasında geçiş yapın. Yalnızca düzeltilmesi gerekenlere odaklanın.
Herhangi bir görseldeki Konumlandır butonuna tıklayarak sayfadaki ilgili öğeye kaydırın ve etrafında kırmızı bir vurgu flaşı yakalayın.
Kırık görsel URL'lerinin listesini tek tıkla kopyalayın; bir hata raporuna yapıştırın veya arka uç ekibiyle paylaşın.
İçerik açısından yoğun sayfalarda arayüzün yanıt vermeye devam etmesi için CSS arka plan taraması 500 adet ile sınırlandırılmıştır.
Kod düzenlemeleri, yeniden adlandırılan varlıklar veya CDN geçişleri nedeniyle oluşan 404'leri yakalamak için dağıtımdan önce hazırlık (staging) ortamında çalıştırın.
Canlı sayfaları periyodik olarak tarayın; kırık görseller SEO'ya ve kullanıcı güvenine zarar verir ve genellikle otomatik testlerden kaçabilir.
Editörler görsel yüklediğinde, bazıları nihai URL'ye asla ulaşmayabilir. Ölü referansları yakalamak için tarama yapın.
Harici görsel servislerine (avatarlar, doğrudan linklenen ürün fotoğrafları) güveniyorsanız, kesintileri yakalamak için düzenli olarak tarayın.
Varlıkları yeni bir CDN'e veya depolama birimine (bucket) taşıdıktan sonra, taşımanın hiçbir şeyi bozmadığını doğrulamak için tüm ana sayfaları tarayın.
DevSuite Pro dock'undaki Kırık Görseller simgesine tıklayın. Bir panel açılır ve sayfayı otomatik olarak tarar.
Panelin üstündeki istatistikler Toplam / Tamam / Kırık / Yükleniyor durumunu gösterir. Kırık sayısı 0'dan büyükse, bunları görmek için Kırık sekmesine geçin.
İlgili öğeye kaydırmak için herhangi bir satırda Konumlandır'a tıklayın; öğenin etrafında 2 saniye boyunca kırmızı bir çerçeve yanıp söner.
Listenin tamamını almak için Kırık URL'leri Kopyala'ya tıklayın; bir iş biletine, sohbete veya arka uç incelemesine yapıştırın.
Arka uç düzeltmelerinden sonra, tüm görsellerin artık doğru şekilde yüklendiğini doğrulamak için Sayfayı Yeniden Tara'ya tıklayın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 64'dan fazla geliştirici aracının kilidini açın.
