التغطية: العثور على محتوى JavaScript وCSS غير المستخدَمَين

يمكن أن تساعدك علامة التبويب "التغطية" ضمن "أدوات مطوري البرامج في Chrome" في العثور على رمز JavaScript وCSS غير المستخدَم. يمكن أن تؤدي إزالة الرموز غير المستخدَمة إلى زيادة سرعة تحميل الصفحة وتوفير بيانات شبكة الجوّال لمستخدمي الأجهزة الجوّالة.

تحليل تغطية الرمز البرمجي
الشكل 1. تحليل تغطية الرمز البرمجي

نظرة عامة

إنّ شحن 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.
  • إذا دخل المستخدم إلى الصفحة من جهاز جوّال، فإن الرمز الإضافي يستهلك بيانات شبكة الجوّال.

فتح علامة التبويب "التغطية"

  1. افتح قائمة الأوامر.
  2. ابدأ في كتابة coverage، وحدد الأمر عرض التغطية، ثم اضغط على Enter لتشغيل الأمر. تفتح علامة التبويب التغطية في الدرج.
علامة التبويب &quot;التغطية&quot;
الشكل 2. علامة التبويب التغطية

تسجيل تغطية الرمز

  1. انقر على أحد الأزرار التالية في علامة التبويب التغطية:
    • انقر على بدء تغطية الأجهزة الجوّالة وإعادة تحميل الصفحة إعادة التحميل إذا كنت تريد معرفة الرمز المطلوب لتحميل الصفحة.
    • انقر على تغطية الأداة تسجيل إذا كنت تريد معرفة الرمز الذي يتم استخدامه بعد التفاعل مع الصفحة.
  2. انقر على إيقاف تغطية القياس وعرض النتائج إيقاف عندما تريد إيقاف تسجيل تغطية الرموز.

تحليل تغطية الرمز البرمجي

يعرض الجدول في علامة التبويب التغطية الموارد التي تم تحليلها ومقدار الرموز البرمجية المستخدَمة في كل مورد. انقر على صف لفتح هذا المورد في لوحة المصادر ومشاهدة تحليل سطر بسطر للرمز المستخدم والرموز غير المستخدمة. سيظهر أي سطر أحمر في بدايته لأي أسطر رمز غير مستخدمة.

تقرير تغطية الرمز
الشكل 3. تقرير تغطية الرمز
  • عمود عنوان URL هو عنوان URL للمورد الذي تم تحليله.
  • يوضّح عمود النوع ما إذا كان المورد يحتوي على CSS أو JavaScript أو كليهما.
  • عمود إجمالي وحدات البايت هو إجمالي حجم المورد بالبايت.
  • عمود وحدات البايت غير المستخدمة هو عدد وحدات البايت التي لم يتم استخدامها.
  • يعرض العمود الأخير بدون اسم تمثيلاً لعمودَي إجمالي وحدات البايت ووحدات البايت غير المستخدمة. القسم الأحمر من الشريط لا يستخدم وحدات بايت غير مستخدمة. يستخدم القسم الأخضر وحدات بايت.