← بازگشت به ویژگی‌ها
Pro

پوشش کد

Code Coverage هر انتخابگر را در هر شیوه نامه قابل خواندن در برابر صفحه زنده آزمایش می کند، بنابراین می توانید ببینید کدام قوانین CSS در حال حاضر با هیچ چیز مطابقت ندارند، هر فایل چند بایت تلف می کند و کدام اسکریپت ها اولین رنگ را نگه می دارند.

استایل شیت ها فقط رشد می کنند. یک موضوع با قوانینی برای صفحاتی که ندارید وارد می‌شود، یک چارچوب اجزایی را ارسال می‌کند که هرگز استفاده نمی‌کنید، و سه طراحی مجدد بعداً هیچ‌کس مطمئن نیست که کدام نیمی از فایل باربر است. نتیجه CSS است که برای هر بازدیدکننده پهنای باند و زمان ارائه قوانینی را که صفحه نمی‌تواند استفاده کند، هزینه می‌کند.

پوشش کد به طور مستقیم اندازه گیری می کند. هر قانون را در هر شیوه نامه ای که مرورگر به آن اجازه می دهد بخواند - از جمله قوانین تودرتو در داخل پرس و جوهای رسانه، @supports و بلوک های لایه @- را اجرا می کند و هر انتخابگر را در برابر DOM زنده آزمایش می کند. قاعده‌ای که در حال حاضر با هیچ چیز مطابقت ندارد، به‌عنوان استفاده نشده گزارش می‌شود، در هر فایل، با درصد، بایت‌های هدر رفته و فهرست کامل انتخاب‌کنندگانی که می‌توانید آن را گسترش داده و کپی کنید.

مراقب تله های آشکار است. عناصر شبه و شبه کلاس‌های حالت قبل از تطبیق حذف می‌شوند، بنابراین یک قانون :hover یا ::before در مورد وجود انتخابگر پایه آن به جای اینکه به اشتباه حذف شود قضاوت می‌شود. برگه‌های سبکی که بدون سرصفحه CORS ارائه می‌شوند، با هیچ اسکریپتی قابل خواندن نیستند، بنابراین به جای اینکه بی‌صدا به‌عنوان کامل حساب شوند، به‌عنوان ناخوانا پرچم‌گذاری می‌شوند. و از آنجایی که اسکن صفحه را همانطور که در آن لحظه هست منعکس می‌کند، قوانین منوها، برگه‌ها و مدال‌هایی که هنوز باز نشده‌اند استفاده‌نشده به نظر می‌رسند - بنابراین آنها را باز کنید و قبل از حذف هر چیزی دوباره اسکن را فشار دهید.

برگه جاوا اسکریپت به یک سوال متفاوت پاسخ می دهد: وزن و مسدود کردن. هر اسکریپتی را که صفحه بارگذاری می‌کند با اندازه انتقال، زمان دانلود آن، و اینکه آیا ناهمگام، معوق، یک ماژول، بارگذاری پویا یا نگه داشتن اولین رنگ است، فهرست می‌کند، سپس تعداد بایت‌های مسدود شده را محاسبه می‌کند. عمداً به عنوان پوشش اجرا فروخته نمی‌شود - دانستن اینکه کدام خطوط جاوا اسکریپت اجرا می‌شوند به API اشکال‌زدای کروم نیاز دارد که DevSuite Pro درخواست نمی‌کند، بنابراین هیچ چیز در اینجا تظاهر به گزارش سطح خطی نمی‌کند.

پیش‌نمایش زنده
example.com
پوشش کد 4182 قانون در 38 میلی ثانیه بررسی شد
CSS استفاده نشده وزن JS
6
برگه های سبک
4,182
قوانین
71%
استفاده نشده
186 KB
CSS هدر رفته
theme.min.css 214 KB 83%
1,842 استفاده می شود · 2,118 استفاده نشده · 142 KB هدر رفت
vendor-grid.css 61 KB 47%
218 استفاده می شود · 194 استفاده نشده · 31 KB هدر رفت
app.css 28 KB 12%
انتخابگرهای استفاده نشده را نشان دهید
fonts.googleapis.com منشاء متقابل n/a
ویژگی‌های کلیدی

تطبیق انتخابگر واقعی

هر قانون در هر شیوه نامه قابل خواندن در برابر DOM زنده آزمایش می شود، از جمله قوانین داخل پرس و جوهای رسانه، @supports و بلوک های لایه @ - نه از نام فایل ها یا اندازه ها تخمین زده می شود.

ضایعات اندازه گیری شده در هر فایل

هر شیوه نامه درصد استفاده نشده، تعداد قوانین استفاده شده در مقابل استفاده نشده و تعداد بایت های هدر رفته را دریافت می کند، به طوری که بدترین متخلف در بالای صفحه باشد.

لیست انتخابگر واقعی

هر فایلی را برای خواندن انتخاب‌کننده‌هایی که مطابقت ندارند، گسترش دهید، سپس آن‌ها را به‌عنوان یک بلوک CSS کپی کنید تا در ویرایشگر خود کار کنید یا به یک هم تیمی تحویل دهید.

دولت آگاه، نه ساده لوح

عناصر شبه و شبه کلاس‌های حالت مانند :hover و:focus-within قبل از تطبیق حذف می‌شوند، بنابراین قوانین تعاملی به‌جای حذف شدن، منصفانه قضاوت می‌شوند.

وزن و مسدود کردن جاوا اسکریپت

هر اسکریپت با اندازه، زمان دانلود و عدم همگام بودن، به تعویق افتادن، یک ماژول، بارگذاری پویا یا مسدود کننده اولین رنگ - به اضافه کل بایت های مسدود کننده فهرست شده است.

صادقانه درباره محدودیت های آن

برگه‌های سبک متقاطع غیرقابل خواندن به جای امتیازدهی، پرچم‌گذاری می‌شوند و برگه JS به وضوح می‌گوید که وزن را اندازه‌گیری می‌کند، نه اینکه کدام خطوط اجرا شده را اندازه‌گیری می‌کند. No invented numbers.

موارد استفاده رایج

کوتاه کردن یک تم پف کرده

یک تم خریداری شده CSS را برای ده ها طرح نمایشی ارسال می کند. ببینید سایت شما هرگز از چه مقدار از آن استفاده نمی کند و فایل را با شواهد به جای حدس و گمان قطع کنید.

ممیزی ساخت چارچوب

بررسی کنید که چه مقدار از یک چارچوب CSS روی یک قالب واقعی باقی می‌ماند و آیا پیکربندی پاکسازی یا درخت لرزان شما همان کاری را انجام می‌دهد که شما فکر می‌کنید.

پیدا کردن آنچه در ابتدا رنگ را مسدود می کند

اسکریپت‌هایی را که رندر را نگه می‌دارند، با اندازه‌هایشان فهرست کنید و تصمیم بگیرید که چه چیزی را به تعویق بیندازید، تقسیم کنید یا رها کنید تا محتوا زودتر روی صفحه نمایش داده شود.

اولویت دادن به سرعت عملکرد

با اعداد وارد شوید: کدام فایل‌ها بیشترین بایت‌ها را هدر می‌دهند، چه مقدار جاوا اسکریپت را مسدود می‌کند، و جایی که ساعت اول کار بیشترین سود را دارد.

بررسی کدهای ارثی

با در اختیار گرفتن سایتی که شما آن را ساخته اید، به سرعت مطالعه کنید که چه مقدار از CSS و جاوا اسکریپت آن هنوز جایگاه خود را به دست آورده است.

نحوه استفاده
1

پوشش کد را باز کنید

روی نماد Code Coverage در داک DevSuite Pro کلیک کنید. اسکن بلافاصله اجرا می شود و گزارش می دهد که چند قانون بررسی شده و چه سهمی از آنها استفاده نشده است.

2

خلاصه را بخوانید

ردیف بالا تعداد شیوه نامه، قوانین کل، درصد استفاده نشده و بایت های تلف شده را به شما می دهد. فایل های زیر بر اساس مقداری که هدر می دهند مرتب شده اند.

3

مجرمان را گسترش دهید

روی نمایش انتخابگرهای استفاده نشده در هر فایلی کلیک کنید تا دقیقاً بخوانید که کدام قوانین با هیچ چیز در این صفحه مطابقت ندارند.

4

با باز کردن صفحه دوباره اسکن کنید

منوها، برگه‌ها، آکاردئون‌ها و مدال‌ها را باز کنید، سپس اسکن مجدد را فشار دهید. قوانینی که عناصر آنها فقط در آن حالت ها وجود دارند، از حالت استفاده نشده به استفاده می شوند - همیشه قبل از حذف این کار را انجام دهید.

5

لیست را بردارید

کپی انتخابگرهای استفاده نشده به شما یک بلوک CSS می دهد تا از طریق آن کار کنید. Export JSON گزارش کامل، از جمله موجودی جاوا اسکریپت را برای یک بلیط یا یک سند ممیزی کپی می کند.

آماده برای امتحان کردن هستید؟

DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۷۱ ابزار توسعه را برای مرورگر خود باز کنید.

افزودن به Chrome افزودن به Edge افزودن به FireFox