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