מאתר התמונות השבורות סורק כל <img> ותמונת רקע CSS (background-image) בדף, מזהה טעינות שנכשלו (שגיאות 404, תקלות CORS, קנבס פגום) ומציג אותן ברשימה נקייה. סננו לפי שבורות/הכל/רקעי CSS, קפצו והדגישו כל תמונה בדף, והעתיקו את רשימת כתובות ה-URL השבורות לדיווח באגים מהיר.
תמונות שבורות הן אחד הבאגים הבולטים ביותר בדף אינטרנט - ובכל זאת קל מאוד לפספס אותן במהלך QA (הבטחת איכות) מכיוון שהן נכשלות בשקט. מאתר התמונות השבורות תופס את כולן. בעת הפעלתו, הכלי סורק את עץ ה-DOM עבור כל רכיב <img> (בודק naturalWidth / naturalHeight כדי לזהות כשלים בטעינה) וכל כתובת URL של background-image ב-CSS (בוחן כל אחת עם אובייקט Image() חדש כדי לאמת את טעינתה). התוצאות מקוטלגות כתקין (OK) / שבור (Broken) / בטעינה (Loading) ומוצגות ברשימה הניתנת לסינון עם ספירת נתונים בחלק העליון. כל רשומה מציגה את ה-URL, הסוג (תמונה או רקע CSS), הממדים אם נטענו, וטקסט חלופי (alt text) אם קיים. תמונות שבורות מודגשות באדום וכוללות כפתור 'אתר' (Locate) שגולל אל האלמנט ומנפנף מסגרת אדומה סביבו. כפתור 'העתק כתובות URL שבורות' (Copy Broken URLs) תופס את כל כתובות ה-URL שנכשלו בבת אחת להעתקה/הדבקה לדיווח באגים. פועל על כל דף ללא צורך בגישה ליומני שרת (backend logs) - שער QA חזותי ומהיר.
בודק כל רכיב <img> בתוספת כל כתובת URL של background-image בסגנונות המחושבים. מזהי URI של נתונים (Data URIs) וכתובות URL של Blob מדולגים (הם תמיד חוקיים).
סטטיסטיקה במבט חטוף המציגה את בריאות תמונות הדף. המספרים מתעדכנים בזמן אמת עם השלמת הבדיקות הא-סינכרוניות.
עברו בין הכרטיסיות 'שבורות' (Broken), 'הכל' (All) ו'רקעי CSS'. הישארו ממוקדים במה שדורש תיקון.
לחצו על 'אתר' בכל תמונה כדי לגלול אל האלמנט שלה בדף ולהבהב הדגשה אדומה סביבו.
לחיצה אחת מעתיקה את רשימת כתובות ה-URL של התמונות השבורות - הדביקו בדיווח באג או שתפו עם צוות השרת (Backend).
מוגבל ל-500 סריקות של רקעי CSS כדי לשמור על רספונסיביות ממשק המשתמש בדפים עתירי תוכן.
הריצו בסביבת staging לפני פריסה כדי לתפוס שגיאות 404 שהוכנסו על ידי ארגון מחדש (refactors), נכסים ששמם שונה, או הגירות CDN.
סרקו מעת לעת דפים חיים - תמונות שבורות פוגעות ב-SEO ובאמון המשתמשים, ולעתים קרובות הן חומקות מבדיקות אוטומטיות.
כאשר עורכים מעלים תמונות, חלקן עלולות לא להגיע לכתובת ה-URL הסופית. סרקו כדי לתפוס הפניות מתות.
אם אתם מסתמכים על שירותי תמונות חיצוניים (תמונות פרופיל (avatars), תמונות מוצר מקושרות-חמות), סרקו באופן קבוע כדי לתפוס השבתות.
לאחר העברת נכסים ל-CDN או לאחסון (bucket) חדש, סרקו כל דף מפתח כדי לאשר שההגירה לא שברה שום דבר.
לחצו על סמל התמונות השבורות (Broken Images) ב-DevSuite Pro. חלונית נפתחת וסורקת את הדף באופן אוטומטי.
הסטטיסטיקה בראש החלונית מציגה סך הכל / תקין / שבור / בטעינה. אם שבורות > 0, עברו לכרטיסייה 'שבורות' כדי לראות אותן.
לחצו על 'אתר' (Locate) בכל שורה כדי לגלול אל האלמנט בדף - מסגרת אדומה תהבהב סביבו במשך 2 שניות.
לחצו על 'העתק כתובות URL שבורות' כדי לתפוס את הרשימה המלאה - הדביקו בכרטיס, בצ'אט או לחקירת השרת.
לאחר תיקוני צד שרת, לחצו על 'סרוק דף מחדש' (Re-scan Page) כדי לוודא שכל התמונות נטענות כעת כראוי.
התקן את DevSuite Pro בחינם ופתח 64+ כלי פיתוח לדפדפן שלך.
