يمكن أن تساعدك لوحة التغطية في "أدوات مطوري البرامج في Chrome" في العثور على رموز JavaScript و رمز CSS. يمكن أن تؤدي إزالة الرمز غير المستخدَم إلى تسريع تحميل الصفحة وحفظ بيانات الجوّال للمستخدمين.
نظرة عامة
إنّ عدم استخدام لغة JavaScript أو CSS هي مشكلة شائعة في تطوير البرامج على الويب. على سبيل المثال، لنفترض أنّك تريد استخدام مكوّن زر التمهيد في صفحتك. لاستخدام مكوِّن الزر، يجب إضافة رابط إليه ورقة أنماط Bootstراب في 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 لجميع مكونات Bootstrap. لكنك لا تستخدم لأي من مكونات التمهيد الأخرى. لذلك يتم تنزيل مجموعة من CSS التي لا يحتاج إليها. تمثل خدمة CSS الإضافية هذه مشكلة فيما يلي الأسباب:
- يؤدي الرمز الإضافي إلى إبطاء تحميل الصفحة. راجِع محتوى CSS الذي يحظر العرض.
- إذا دخل أحد المستخدمين إلى الصفحة على جهاز جوّال، سيستخدم الرمز الإضافي بيانات الجوّال الخاصة بهم.
فتح لوحة "التغطية"
- افتح قائمة الأوامر.
ابدأ كتابة
coverage، واختَر الأمر إظهار التغطية، ثم اضغط على Enter لتشغيل الأمر. تفتح لوحة التغطية في الدرج.
تسجيل تغطية الرمز البرمجي
للحصول على تغطية الرمز:
لضبط نطاق التغطية، في شريط الإجراءات أعلى لوحة التغطية، اختَر حسب الوظيفة أو لكل كتلة من القائمة المنسدلة.
لبدء التسجيل، انقر على إعادة تحميل بدء تغطية قياس حالة الأداة وإعادة تحميل الصفحة تؤدي لوحة التغطية إلى إعادة تحميل الصفحة، وتسجيل الرمز المطلوب لتحميل الصفحة، ومواصلة التسجيل أثناء تفاعلك مع الصفحة.
لإيقاف تسجيل تغطية الرمز، انقر على stop_circle إيقاف تغطية قياس حالة التطبيق وعرض النتائج.
تحليل تغطية الرمز البرمجي
يوضّح لك الجدول في لوحة التغطية الموارد التي تم تحليلها ومقدار الرموز المستخدمة داخل كل مورد.
انقر على أحد الصفوف لفتح هذا المورد في لوحة المصادر والاطّلاع على تقسيم تفصيلي للرموز البرمجية المستخدَمة والرموز غير المستخدَمة. يتم تمييز أي أسطر غير مستخدمة من التعليمة البرمجية بخطوط حمراء بجوار العمود مع أرقام الأسطر على اليسار.
- عمود عنوان URL هو عنوان URL للمرجع الذي تم تحليله.
- يوضح عمود النوع ما إذا كان المورد يحتوي على CSS أو JavaScript أو أو كليهما.
- عمود إجمالي وحدات البايت هو إجمالي حجم المورد بالبايت.
- يمثل عمود وحدات البايت غير المستخدمة عدد وحدات البايت التي لم يتم استخدامها.
- إن العمود الأخير بدون اسم هو عرض مرئي لإجمالي وحدات البايت أعمدة وحدات البايت غير المستخدمة. القسم الأحمر من الشريط هو وحدات بايت غير مستخدمة. تشير رسالة الأشكال البيانية القسم الرمادي يُستخدم بايت.
لفلترة التقرير حسب عنوان URL، حدِّده في الفلتر في شريط الإجراءات.
يعرض شريط الحالة في أسفل لوحة التغطية النسبة المئوية للرمز المستخدَم. يراعي شريط الحالة الفلترة.
بجانب شريط الفلترة، من القائمة المنسدلة، يمكنك اختيار الكل، أو CSS أو JavaScript فقط لعرضه في تقريرك.
لتضمين رمز الإضافة في تقريرك، فعِّل check_box نصوص المحتوى البرمجية.
لتصدير تقريرك، انقر على تنزيل تصدير التغطية.