Code Coverage هر انتخابگر را در هر شیوه نامه قابل خواندن در برابر صفحه زنده آزمایش می کند، بنابراین می توانید ببینید کدام قوانین CSS در حال حاضر با هیچ چیز مطابقت ندارند، هر فایل چند بایت تلف می کند و کدام اسکریپت ها اولین رنگ را نگه می دارند.
استایل شیت ها فقط رشد می کنند. یک موضوع با قوانینی برای صفحاتی که ندارید وارد میشود، یک چارچوب اجزایی را ارسال میکند که هرگز استفاده نمیکنید، و سه طراحی مجدد بعداً هیچکس مطمئن نیست که کدام نیمی از فایل باربر است. نتیجه CSS است که برای هر بازدیدکننده پهنای باند و زمان ارائه قوانینی را که صفحه نمیتواند استفاده کند، هزینه میکند.
پوشش کد به طور مستقیم اندازه گیری می کند. هر قانون را در هر شیوه نامه ای که مرورگر به آن اجازه می دهد بخواند - از جمله قوانین تودرتو در داخل پرس و جوهای رسانه، @supports و بلوک های لایه @- را اجرا می کند و هر انتخابگر را در برابر DOM زنده آزمایش می کند. قاعدهای که در حال حاضر با هیچ چیز مطابقت ندارد، بهعنوان استفاده نشده گزارش میشود، در هر فایل، با درصد، بایتهای هدر رفته و فهرست کامل انتخابکنندگانی که میتوانید آن را گسترش داده و کپی کنید.
مراقب تله های آشکار است. عناصر شبه و شبه کلاسهای حالت قبل از تطبیق حذف میشوند، بنابراین یک قانون :hover یا ::before در مورد وجود انتخابگر پایه آن به جای اینکه به اشتباه حذف شود قضاوت میشود. برگههای سبکی که بدون سرصفحه CORS ارائه میشوند، با هیچ اسکریپتی قابل خواندن نیستند، بنابراین به جای اینکه بیصدا بهعنوان کامل حساب شوند، بهعنوان ناخوانا پرچمگذاری میشوند. و از آنجایی که اسکن صفحه را همانطور که در آن لحظه هست منعکس میکند، قوانین منوها، برگهها و مدالهایی که هنوز باز نشدهاند استفادهنشده به نظر میرسند - بنابراین آنها را باز کنید و قبل از حذف هر چیزی دوباره اسکن را فشار دهید.
برگه جاوا اسکریپت به یک سوال متفاوت پاسخ می دهد: وزن و مسدود کردن. هر اسکریپتی را که صفحه بارگذاری میکند با اندازه انتقال، زمان دانلود آن، و اینکه آیا ناهمگام، معوق، یک ماژول، بارگذاری پویا یا نگه داشتن اولین رنگ است، فهرست میکند، سپس تعداد بایتهای مسدود شده را محاسبه میکند. عمداً به عنوان پوشش اجرا فروخته نمیشود - دانستن اینکه کدام خطوط جاوا اسکریپت اجرا میشوند به API اشکالزدای کروم نیاز دارد که DevSuite Pro درخواست نمیکند، بنابراین هیچ چیز در اینجا تظاهر به گزارش سطح خطی نمیکند.
هر قانون در هر شیوه نامه قابل خواندن در برابر DOM زنده آزمایش می شود، از جمله قوانین داخل پرس و جوهای رسانه، @supports و بلوک های لایه @ - نه از نام فایل ها یا اندازه ها تخمین زده می شود.
هر شیوه نامه درصد استفاده نشده، تعداد قوانین استفاده شده در مقابل استفاده نشده و تعداد بایت های هدر رفته را دریافت می کند، به طوری که بدترین متخلف در بالای صفحه باشد.
هر فایلی را برای خواندن انتخابکنندههایی که مطابقت ندارند، گسترش دهید، سپس آنها را بهعنوان یک بلوک CSS کپی کنید تا در ویرایشگر خود کار کنید یا به یک هم تیمی تحویل دهید.
عناصر شبه و شبه کلاسهای حالت مانند :hover و:focus-within قبل از تطبیق حذف میشوند، بنابراین قوانین تعاملی بهجای حذف شدن، منصفانه قضاوت میشوند.
هر اسکریپت با اندازه، زمان دانلود و عدم همگام بودن، به تعویق افتادن، یک ماژول، بارگذاری پویا یا مسدود کننده اولین رنگ - به اضافه کل بایت های مسدود کننده فهرست شده است.
برگههای سبک متقاطع غیرقابل خواندن به جای امتیازدهی، پرچمگذاری میشوند و برگه JS به وضوح میگوید که وزن را اندازهگیری میکند، نه اینکه کدام خطوط اجرا شده را اندازهگیری میکند. No invented numbers.
یک تم خریداری شده CSS را برای ده ها طرح نمایشی ارسال می کند. ببینید سایت شما هرگز از چه مقدار از آن استفاده نمی کند و فایل را با شواهد به جای حدس و گمان قطع کنید.
بررسی کنید که چه مقدار از یک چارچوب CSS روی یک قالب واقعی باقی میماند و آیا پیکربندی پاکسازی یا درخت لرزان شما همان کاری را انجام میدهد که شما فکر میکنید.
اسکریپتهایی را که رندر را نگه میدارند، با اندازههایشان فهرست کنید و تصمیم بگیرید که چه چیزی را به تعویق بیندازید، تقسیم کنید یا رها کنید تا محتوا زودتر روی صفحه نمایش داده شود.
با اعداد وارد شوید: کدام فایلها بیشترین بایتها را هدر میدهند، چه مقدار جاوا اسکریپت را مسدود میکند، و جایی که ساعت اول کار بیشترین سود را دارد.
با در اختیار گرفتن سایتی که شما آن را ساخته اید، به سرعت مطالعه کنید که چه مقدار از CSS و جاوا اسکریپت آن هنوز جایگاه خود را به دست آورده است.
روی نماد Code Coverage در داک DevSuite Pro کلیک کنید. اسکن بلافاصله اجرا می شود و گزارش می دهد که چند قانون بررسی شده و چه سهمی از آنها استفاده نشده است.
ردیف بالا تعداد شیوه نامه، قوانین کل، درصد استفاده نشده و بایت های تلف شده را به شما می دهد. فایل های زیر بر اساس مقداری که هدر می دهند مرتب شده اند.
روی نمایش انتخابگرهای استفاده نشده در هر فایلی کلیک کنید تا دقیقاً بخوانید که کدام قوانین با هیچ چیز در این صفحه مطابقت ندارند.
منوها، برگهها، آکاردئونها و مدالها را باز کنید، سپس اسکن مجدد را فشار دهید. قوانینی که عناصر آنها فقط در آن حالت ها وجود دارند، از حالت استفاده نشده به استفاده می شوند - همیشه قبل از حذف این کار را انجام دهید.
کپی انتخابگرهای استفاده نشده به شما یک بلوک CSS می دهد تا از طریق آن کار کنید. Export JSON گزارش کامل، از جمله موجودی جاوا اسکریپت را برای یک بلیط یا یک سند ممیزی کپی می کند.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۷۱ ابزار توسعه را برای مرورگر خود باز کنید.