پنل Coverage به شما کمک میکند تا کدهای جاوا اسکریپت و CSS استفاده نشده را پیدا کنید. حذف کدهای استفاده نشده میتواند سرعت بارگذاری صفحه شما را افزایش داده و در مصرف داده تلفن همراه کاربران شما صرفهجویی کند.
نمای کلی
ارسال فایلهای جاوا اسکریپت یا CSS استفاده نشده یک مشکل رایج در توسعه وب است. برای مثال، فرض کنید میخواهید از کامپوننت دکمه بوتاسترپ در صفحه خود استفاده کنید. برای استفاده از کامپوننت دکمه، باید لینکی به style sheet بوتاسترپ در HTML خود اضافه کنید، مانند این:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
این شیوهنامه فقط شامل کد کامپوننت دکمه نیست. بلکه شامل CSS تمام کامپوننتهای بوتاسترپ نیز میشود. اما شما از هیچ یک از کامپوننتهای دیگر بوتاسترپ استفاده نمیکنید. بنابراین صفحه شما در حال دانلود مجموعهای از CSS است که به آن نیازی ندارد. این CSS اضافی به دلایل زیر مشکلساز است:
- کد اضافی سرعت بارگذاری صفحه شما را کاهش میدهد. به بخش مسدود کردن رندر CSS مراجعه کنید.
- اگر کاربری از طریق دستگاه تلفن همراه به صفحه دسترسی پیدا کند، کد اضافی از داده تلفن همراه او استفاده میکند.
پنل Coverage به شما امکان میدهد صفحه خود را ثبت کنید و گزارشی از کل بایتهای استفاده شده و استفاده نشده منابع CSS و Javascript را مشاهده کنید و کد را در پنل Sources ردیابی کنید.
پنل پوشش را باز کنید
- ابزار توسعه (Devtools) را باز کنید .
- منوی فرمان را باز کنید .
شروع به تایپ کردن
coverageکنید، دستور Show Coverage را انتخاب کنید و سپس Enter را برای اجرای دستور فشار دهید. پنل Coverage در Drawer باز میشود.
روش دیگر این است که در گوشه بالا سمت راست، more_vert را انتخاب کنید. گزینههای بیشتر > ابزارهای بیشتر > پوشش .
پوشش کد رکورد
برای ثبت پوشش کد:
برای تنظیم محدوده پوشش، در نوار عملیات بالای پنل Coverage ، از لیست کشویی، گزینه Per function یا Per block را انتخاب کنید.
برای شروع ضبط، روی دکمهی و Reload در مرکز پنل کلیک کنید. پنل Coverage صفحه را مجدداً بارگذاری میکند، کد مورد نیاز برای بارگذاری صفحه را دریافت میکند و در حالی که شما با صفحه تعامل دارید، ضبط را ادامه میدهد.
برای متوقف کردن ضبط پوشش کد، روی کلیک کنید تا پوشش ابزار دقیق متوقف شود و نتایج در نوار اقدام پنل نمایش داده شود .
پوشش کد را تجزیه و تحلیل کنید
جدول موجود در پنل Coverage به شما نشان میدهد که چه منابعی مورد تجزیه و تحلیل قرار گرفتهاند و چه مقدار کد در هر منبع استفاده شده است.
برای باز کردن آن منبع در پنل منابع ، روی یک ردیف کلیک کنید و جزئیات خط به خط کدهای استفاده شده و استفاده نشده را مشاهده کنید. هر خط کد استفاده نشده با خطوط خاکستری عمودی در کنار ستون مشخص شده و شماره خطوط در سمت چپ قرار دارد.
- ستون URL ، آدرس اینترنتی منبعی است که مورد تجزیه و تحلیل قرار گرفته است.
- ستون نوع (Type) میگوید که آیا منبع شامل CSS، جاوا اسکریپت یا هر دو است.
- ستون Total Bytes حجم کل منبع را بر حسب بایت نشان میدهد.
- ستون «بایتهای استفاده نشده» تعداد بایتهایی است که استفاده نشدهاند.
- ستون «نمایش میزان استفاده» (Usage Visualization) نموداری از ستونهای «مجموع بایتها» (Total Bytes) و «بایتهای استفاده نشده» (Unused Bytes) است. بخش خاکستری این نوار، بایتهای استفاده نشده و بخش سبز، بایتهای استفاده شده را نشان میدهد.
برای فیلتر کردن گزارش بر اساس URL، آن را در فیلتر موجود در نوار عملیات مشخص کنید.
نوار وضعیت در پایین پنل Coverage درصد کد استفاده شده را به شما نشان میدهد. نوار وضعیت، فیلترینگ را نیز در نظر میگیرد.
در کنار نوار فیلتر، از لیست کشویی، میتوانید همه یا فقط CSS یا جاوا اسکریپت را برای نمایش در گزارش خود انتخاب کنید.
برای افزودن کد افزونه به گزارش خود، گزینهی Content scripts را فعال کنید.
برای خروجی گرفتن از گزارش خود، «خروجی پوشش» کلیک کنید.