Broken Image Finder هر <img> و background-image CSS در صفحه را اسکن میکند، بارگذاریهای خراب (404، شکست CORS، canvas آلوده) را تشخیص میدهد و آنها را در فهرستی تمیز نشان میدهد. بر اساس خراب/همه/پسزمینههای CSS فیلتر کنید، به هر تصویر در صفحه بروید و آن را هایلایت کنید، و فهرست URLهای خراب را برای گزارش سریع باگ کپی کنید.
تصاویر خراب یکی از قابلمشاهدهترین باگهای یک صفحه وب هستند — با این حال بهطرز شگفتانگیزی راحت در طول QA نادیده گرفته میشوند چون بیسروصدا شکست میخورند. Broken Image Finder همه آنها را میگیرد. هنگام فعال شدن، ابزار در DOM به دنبال هر عنصر <img> میگردد (با بررسی naturalWidth / naturalHeight برای تشخیص بارگذاریهای ناموفق) و هر URL بکگراند CSS را (با آزمایش هرکدام از طریق یک Image() تازه برای تأیید بارگذاری) بررسی میکند. نتایج بهعنوان OK / Broken / Loading دستهبندی شده و در یک فهرست قابل فیلتر همراه با شمارش آمار در بالا ارائه میشوند. هر ورودی URL، نوع (img یا CSS bg)، ابعاد در صورت بارگذاری، و متن alt در صورت وجود را نشان میدهد. تصاویر خراب با رنگ قرمز هایلایت میشوند و دکمهای "Locate" دارند که عنصر را به نمای صفحه اسکرول میکند و یک قاب قرمز چشمکزن دور آن نشان میدهد. دکمه "Copy Broken URLs" همه URLهای ناموفق را یکجا برای کپی/پیست در گزارش باگ برمیدارد. روی هر صفحهای بدون نیاز به دسترسی به لاگهای بکاند کار میکند — یک دروازه QA بصری سریع.
هر عنصر <img> بهعلاوه هر URL بکگراند-ایمیج در استایلهای محاسبهشده را بررسی میکند. URLهای data و blob نادیده گرفته میشوند (چون همیشه معتبرند).
آماری در یک نگاه، سلامت تصاویر صفحه را نشان میدهد. اعداد بهطور زنده هنگام تکمیل بررسیهای ناهمگام بهروزرسانی میشوند.
بین تبهای Broken، All و CSS Backgrounds جابهجا شوید. روی چیزی که نیاز به اصلاح دارد متمرکز بمانید.
روی Locate در هر تصویر کلیک کنید تا به عنصر آن در صفحه اسکرول کرده و یک هایلایت قرمز چشمکزن دور آن نشان دهد.
یک کلیک فهرست URLهای تصاویر خراب را کپی میکند — در یک گزارش باگ پیست کنید یا با تیم بکاند به اشتراک بگذارید.
برای حفظ پاسخگویی UI در صفحات پرمحتوا، اسکن پسزمینههای CSS به 500 مورد محدود میشود.
روی staging پیش از استقرار اجرا کنید تا 404های ناشی از بازآرایی کد، تغییر نام داراییها یا انتقال CDN را بگیرید.
بهطور دورهای صفحات زنده را اسکن کنید — تصاویر خراب به سئو و اعتماد کاربر آسیب میزنند و اغلب از تستهای خودکار جا میمانند.
وقتی ویراستاران تصاویر آپلود میکنند، برخی ممکن است هرگز به URL نهایی نرسند. برای شناسایی ارجاعات مرده اسکن کنید.
اگر به سرویسهای تصویری خارجی (آواتارها، عکسهای محصول hot-linked) متکی هستید، بهطور منظم اسکن کنید تا قطعیها را بگیرید.
پس از انتقال داراییها به یک CDN یا bucket جدید، هر صفحه کلیدی را اسکن کنید تا مطمئن شوید مهاجرت چیزی را خراب نکرده است.
روی آیکون Broken Images در داک DevSuite Pro کلیک کنید. پنلی باز میشود و بهطور خودکار صفحه را اسکن میکند.
آمار بالای پنل، Total / OK / Broken / Loading را نشان میدهد. اگر Broken بزرگتر از صفر بود، به تب Broken بروید تا آنها را ببینید.
روی Locate در هر ردیف کلیک کنید تا عنصر آن در صفحه به نما اسکرول شود — یک قاب قرمز به مدت 2 ثانیه دور آن چشمک میزند.
روی Copy Broken URLs کلیک کنید تا فهرست کامل را بردارید — در یک تیکت، چت یا بررسی بکاند پیست کنید.
پس از اصلاحات بکاند، روی Re-scan Page کلیک کنید تا تأیید کنید همه تصاویر اکنون بهدرستی بارگذاری میشوند.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۶۴ ابزار توسعه را برای مرورگر خود باز کنید.
