از پنل نمای کلی CSS برای درک بهتر CSS صفحه خود و شناسایی پیشرفت های بالقوه استفاده کنید.
پانل CSS Overview را باز کنید
- هر صفحه وب مانند این صفحه را باز کنید.
- DevTools را باز کنید .
انتخاب کنید
ابزارهای DevTools > ابزارهای بیشتر > نمای کلی CSS را سفارشی و کنترل کنید . 
از طرف دیگر، از منوی فرمان برای باز کردن پانل CSS Overview استفاده کنید.
یک گزارش CSS Overview را اجرا و دوباره اجرا کنید
برای ایجاد گزارش نمای کلی CSS از صفحه خود، روی دکمه Capture Overview کلیک کنید.
برای اجرای مجدد یک نمای کلی CSS، روی آن کلیک کنید
نماد نمای کلی را پاک کنید و مرحله اول را تکرار کنید. 
گزارش نمای کلی CSS را درک کنید
این گزارش شامل پنج بخش است:
- خلاصه مروری . خلاصه سطح بالایی از CSS صفحه شما.
رنگ ها تمام رنگ های صفحه شما رنگ‌ها بر اساس انواع گروه‌بندی می‌شوند، مانند رنگ‌های پس‌زمینه، رنگ‌های متن و غیره. این بخش همچنین متن‌هایی را به شما نشان می‌دهد که دارای کنتراست پایین هستند.
هر رنگ قابل کلیک است. برای مثال، فرض کنید رنگ حاشیه
#DADCE0با رنگ بندی سایت شما مطابقت ندارد. برای دریافت لیستی از عناصری که از این رنگ استفاده می کنند، روی رنگ کلیک کنید.
برای برجسته کردن عنصر در صفحه، نشانگر را روی عنصر موجود در لیست قرار دهید.
برای باز کردن عنصر در پنل Elements ، روی عنصر موجود در لیست کلیک کنید.
اطلاعات فونت همه فونت‌های صفحه شما و موارد آنها، بر اساس اندازه فونت، وزن فونت و ارتفاع خط مختلف گروه‌بندی شده‌اند. مانند بخش Colors ، برای مشاهده لیست عناصر تحت تأثیر، روی وقوع آنها کلیک کنید.
اظهارنامه های استفاده نشده همه سبک هایی که هیچ تاثیری ندارند، بر اساس دلیل گروه بندی شده اند.
به عنوان مثال، دو اعلان بالا استفاده نمی شوند زیرا محتوا ارتفاع و عرض یک عنصر درون خطی را تعیین می کند. برای مشاهده عناصر مربوطه، روی رخدادها کلیک کنید.
داستان های رسانه . تمام درخواست‌های رسانه‌ای که در صفحه شما تعریف شده‌اند، بر اساس تعداد موارد به ترتیب نزولی مرتب شده‌اند. برای مشاهده لیست عناصر تحت تأثیر، روی رخدادهای آنها کلیک کنید.
