المطوّرون 🔒 يعمل داخل متصفحك — لا تُرسل أي بيانات

استخراج CSS المستخدم من تصدير Coverage في Chrome

أفلِت ملف JSON من لوحة Coverage واحصل على ورقة أنماط واحدة لا تضم إلا القواعد التي طبّقتها الصفحة، وهي لا تزال داخل استعلامات الوسائط الخاصة بها.

تصدير Coverage من Chrome DevTools

↑

أفلِت ملف JSON التغطية هنا، أو انقر لاختياره

في Chrome: افتح DevTools، ثم ⋮، ثم More tools، ثم Coverage. أعد تحميل الصفحة واستخدمها (افتح القوائم، وغيّر حجم النافذة)، ثم اضغط Export.

CSS المستخدم

كل شيء يجري داخل متصفحك؛ لا يُرفع أي شيء.

طريقة الاستخدام

في Chrome، افتح DevTools، ثم More tools، ثم Coverage، واضغط زر إعادة التحميل فيها.
استخدم الصفحة: افتح القوائم، ومرّر، وغيّر حجم النافذة إلى العروض التي تدعمها.
اضغط Export، ثم أفلِت ملف JSON على منطقة الرفع في الأعلى.
اضغط استخراج CSS المستخدم، وراجع جدول أوراق الأنماط، ونزّل النتيجة في ملف .css.

الأسئلة الشائعة

ماذا يحتوي تصدير Coverage؟

قائمة فيها إدخال واحد لكل ملف حمّلته الصفحة: عنوانه ونصه الكامل ونطاقات ذلك النص التي استخدمها المتصفح. تحتفظ الأداة بأوراق الأنماط وكتل style داخل HTML، وتتخطى إدخالات JavaScript.

لماذا تنطبق أنماط الجوال على سطح المكتب مع أدوات أخرى؟

يسجّل Chrome القواعد الموجودة داخل media query، لا سطر media query المحيط بها. والأداة التي تنسخ النطاقات كما هي تفقد ذلك السطر. أما هذه الأداة فتعيد بناء ورقة الأنماط في شكل شجرة وتعيد كل قاعدة إلى داخل كتلة @media الخاصة بها.

بعض الأنماط مفقودة بعد الاستخراج. لماذا؟

لا تسجّل Coverage إلا ما حدث أثناء تشغيلها. فالقائمة التي لم تفتحها، أو حالة hover التي لم تُفعّلها، أو عرض الشاشة الذي لم تجرّبه، يُعدّ غير مستخدم. سجّل من جديد واستخدم تلك الأجزاء من الصفحة.

هل تعمل مع ملف تغطية من Puppeteer؟

نعم. تُرجع page.coverage.stopCSSCoverage() في Puppeteer بيانات بالشكل نفسه، لذا فإن حفظها باستخدام JSON.stringify يعطي ملفًا تقرؤه هذه الأداة.

تحويل Coverage JSON إلى CSS

آخر تحديث: 29 سبتمبر 2026 · بقلم سامان

تُظهر لوحة Coverage في Chrome DevTools مقدار ما تستخدمه الصفحة فعلًا من كل ورقة أنماط، ويحفظ زرها Export (تصدير) ذلك بصيغة JSON. والملف وحده قليل الفائدة: فهو يضم النص الكامل لكل ملف مع قوائم من مواضع الأحرف. تفتح هذه الصفحة مزيل CSS غير المستخدم على تبويب JSON التغطية، الذي يحوّل التصدير إلى ورقة أنماط جاهزة للنشر.

سجّل بحيث لا يضيع شيء

النتيجة لا تكون أكمل من التسجيل. ابدأ التسجيل بزر إعادة التحميل في اللوحة حتى تُضمَّن القواعد المستخدمة أثناء تحميل الصفحة، ثم استخدم كل جزء من الصفحة قد يستخدمه الزائر: قائمة الجوال، والقوائم المنسدلة، والتبويبات، والأكورديونات، والنوافذ المنبثقة، والنماذج مع حالات الخطأ فيها. وغيّر حجم النافذة عبر نقاط التوقف (breakpoints) أثناء التسجيل. كل ما لا تُفعّله يُعامَل على أنه غير مستخدم.

ماذا يحدث لكل جزء من ورقة الأنماط

في ورقة الأنماط	في النتيجة
قاعدة استخدمتها الصفحة	تبقى، تمامًا كما كُتبت
قاعدة مستخدمة داخل `@media` أو `@supports` أو `@container` أو `@layer`	تبقى داخل الكتلة نفسها
كتلة لم تبقَ فيها قاعدة مستخدمة	تُحذف مع قواعدها
`@font-face` و`@keyframes` و`@import` و`@charset`	تبقى دائمًا
قاعدة لم تستخدمها الصفحة قط	تُحذف

الأنماط والسكربتات المضمَّنة في التصدير

يظهر HTML الصفحة نفسها في التصدير أيضًا، مع نطاقات كتل <style> و<script> المضمَّنة فيه. تقرأ الأداة كل كتلة style من المستند، وتُبقي قواعدها المستخدمة، وتدرجها في جدول النتائج على أنها نمط مضمَّن. أما ملفات JavaScript فتُتخطى، ويذكر الملخص عدد الإدخالات التي استُبعدت.

استخدام النتيجة

تبدأ المخرجات كل ورقة أنماط بتعليق يذكر عنوانها، فيمكنك تقسيمها من جديد أو إبقاؤها ملفًا واحدًا. استبدل روابط أوراق الأنماط في الصفحة بالملف الجديد، واختبر الصفحة على كل العروض، واحتفظ بالملفات الأصلية حتى تتأكد. ولموقع مبني بأداة بناء صفحات، يتناول دليل تحويل صفحة Elementor إلى HTML وCSS بقية عملية النقل، أما PurgeCSS أونلاين فهو الطريق المناسب حين تكون لديك ملفات HTML وCSS بدلًا من تسجيل.