تختبر تغطية التعليمات البرمجية كل محدد في كل ورقة أنماط قابلة للقراءة مقابل الصفحة المباشرة، حتى تتمكن من معرفة قواعد CSS التي لا تتطابق حاليًا مع أي شيء، وعدد البايتات التي يضيعها كل ملف، وأي البرامج النصية التي تعيق الطلاء الأول.
أوراق الأنماط تنمو فقط. تصل السمة مع قواعد للصفحات التي لا تملكها، ويشحن إطار العمل المكونات التي لا تستخدمها أبدًا، وبعد ثلاث عمليات إعادة تصميم لا أحد متأكد من نصف الملف الذي يحمل التحميل. والنتيجة هي CSS الذي يكلف كل عرض النطاق الترددي للزائر ويوفر الوقت لتقديم القواعد التي لا يمكن للصفحة استخدامها.
تقيس تغطية الكود ذلك بشكل مباشر. فهو يتتبع كل قاعدة في كل ورقة أنماط سيسمح له المتصفح بقراءتها - بما في ذلك القواعد المتداخلة داخل استعلامات الوسائط، وكتل @supports و @layer - ويختبر كل محدد مقابل DOM المباشر. يتم الإبلاغ عن القاعدة التي لا تتطابق مع أي شيء الآن على أنها غير مستخدمة، لكل ملف، مع نسبة مئوية، ووحدات البايت الضائعة، والقائمة الكاملة للمحددات التي يمكنك توسيعها ونسخها.
إنه حذر بشأن الفخاخ الواضحة. يتم تجريد العناصر الزائفة والفئات الزائفة قبل المطابقة، لذلك يتم الحكم على قاعدة :hover أو ::before على ما إذا كان محددها الأساسي موجودًا أم لا بدلاً من شطبها بشكل خاطئ. لا يمكن قراءة أوراق الأنماط التي يتم تقديمها عبر الأصل بدون رؤوس CORS بواسطة أي برنامج نصي، لذلك يتم وضع علامة عليها على أنها غير قابلة للقراءة بدلاً من اعتبارها مثالية بصمت. ولأن الفحص يعكس الصفحة كما هي في تلك اللحظة، فإن قواعد القوائم وعلامات التبويب والنماذج التي لم يتم فتحها بعد ستبدو غير مستخدمة - لذا افتحها واضغط على إعادة المسح قبل حذف أي شيء.
تجيب علامة التبويب JavaScript على سؤال مختلف: الوزن والحظر. يقوم بجرد كل برنامج نصي تقوم الصفحة بتحميله مع حجم النقل الخاص به، ووقت التنزيل، وما إذا كان غير متزامن، أو مؤجل، أو وحدة نمطية، أو تم تحميله ديناميكيًا أو تعليق الطلاء الأول، ثم يقوم بإجمالي عدد البايتات المحظورة. لا يتم بيعه عمدًا كتغطية للتنفيذ - فمعرفة خطوط JavaScript التي تم تشغيلها تتطلب واجهة برمجة تطبيقات مصحح الأخطاء في Chrome، والتي لا يطلبها DevSuite Pro، لذلك لا يوجد شيء هنا يتظاهر بأنه تقرير على مستوى السطر.
يتم اختبار كل قاعدة في كل ورقة أنماط قابلة للقراءة مقابل DOM المباشر، بما في ذلك القواعد داخل استعلامات الوسائط وكتل @supports و@layer - ولا يتم تقديرها من أسماء الملفات أو أحجامها.
تحصل كل ورقة أنماط على نسبة مئوية غير مستخدمة، وعدد القواعد المستخدمة مقابل غير المستخدمة، وعدد البايتات الضائعة، ويتم فرزها بحيث يكون أسوأ مخالف في الأعلى.
قم بتوسيع أي ملف لقراءة المحددات التي لا تتطابق مع أي شيء، ثم انسخها ككتلة CSS للعمل عليها في المحرر الخاص بك أو تسليمها إلى زميل في الفريق.
يتم تجريد العناصر الزائفة والفئات الزائفة مثل :hover و :focus-within قبل المطابقة، لذلك يتم الحكم على القواعد التفاعلية بشكل عادل بدلاً من شطبها.
يتم إدراج كل برنامج نصي بحجمه ووقت تنزيله وما إذا كان غير متزامن أو مؤجل أو وحدة نمطية أو تم تحميله ديناميكيًا أو حظر الطلاء الأول - بالإضافة إلى إجمالي بايتات الحظر.
يتم وضع علامة على أوراق الأنماط المشتركة غير القابلة للقراءة بدلاً من تسجيلها، وتشير علامة التبويب JS بوضوح إلى أنها تقيس الوزن، وليس الخطوط التي تم تنفيذها. لا توجد أرقام مخترعة.
يتم شحن السمة المشتراة إلى CSS لعشرات التخطيطات التجريبية. تعرف على المقدار الذي لا يستخدمه موقعك أبدًا واختصر الملف بالأدلة بدلاً من التخمين.
تحقق من مدى بقاء إطار عمل CSS على قالب حقيقي، وما إذا كان تكوين التطهير أو اهتزاز الشجرة الخاص بك يفعل ما تعتقد أنه يفعله.
قم بإدراج البرامج النصية التي تمنع العرض، مع أحجامها، وحدد ما يجب تأجيله أو تقسيمه أو إسقاطه لعرض المحتوى على الشاشة عاجلاً.
تعرف على الأرقام: ما هي الملفات التي تهدر أكبر عدد من وحدات البايت، ومقدار حظر جافا سكريبت، والمكان الذي تحقق فيه الساعة الأولى من العمل أقصى استفادة.
عند توليك موقعًا لم تقم بإنشائه، احصل على قراءة سريعة حول مقدار CSS وJavaScript الذي لا يزال يحظى بمكانته.
انقر على أيقونة Code Coverage في قاعدة DevSuite Pro. يتم تشغيل الفحص على الفور ويبلغ عن عدد القواعد التي تم فحصها والحصة غير المستخدمة منها.
يمنحك الصف العلوي عدد أوراق الأنماط والقواعد الإجمالية والنسبة المئوية غير المستخدمة والبايتات الضائعة. يتم ترتيب الملفات أدناه حسب مقدار ما تهدره.
انقر فوق إظهار المحددات غير المستخدمة في أي ملف لقراءة القواعد التي لا تتطابق مع أي شيء في هذه الصفحة بالضبط.
افتح القوائم وعلامات التبويب والأكورديونات والنماذج، ثم اضغط على Re-scan. ستنتقل القواعد التي توجد عناصرها فقط في تلك الحالات من غير مستخدمة إلى مستخدمة - افعل ذلك دائمًا قبل الحذف.
يمنحك نسخ المحددات غير المستخدمة كتلة CSS للعمل من خلالها؛ يقوم تصدير JSON بنسخ التقرير الكامل، بما في ذلك مخزون JavaScript، للحصول على تذكرة أو مستند تدقيق.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 71 أداة للمطورين لمتصفحك.
