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