كيفية قياس حجم صفحة الويب في Chrome DevTools

لقياس حجم صفحة الويب بأكملها في Chrome DevTools، يمكنك استخدام ميزة “Coverage” المتوفرة في DevTools. هذه الميزة تساعدك على فحص استخدام الموارد في صفحتك، بما في ذلك الكود الخاص بالصفحة والملفات الأخرى مثل الصور والملفات النصية والأنماط.

لقياس حجم الصفحة بشكل دقيق، اتبع الخطوات التالية:

1. افتح DevTools في Chrome.
2. انتقل إلى علامة التبويب “Coverage” (يمكنك العثور عليها عن طريق النقر على زر الثلاث نقاط في أعلى النافذة ثم اختيار “More tools” ثم “Coverage”).
3. انقر فوق زر “Start instrumenting coverage” لبدء تحميل الصفحة وتحليل الاستخدام.
4. بمجرد تحميل الصفحة بالكامل، انقر على زر “Stop instrumenting coverage” لإيقاف العرض.
5. ستظهر لك تغطية الصفحة بالتفصيل، بما في ذلك حجم كل ملف ونسبة استخدامه.
6. بالنقر فوق كل ملف، يمكنك عرض حجمه بشكل منفصل.

هذه الطريقة تتيح لك معرفة حجم الصفحة بالكامل، بما في ذلك جميع الملفات والموارد المستخدمة.

بالطبع! إضافة إلى ما ذكرته سابقًا، يمكنك أيضًا استخدام ميزة “Network” في Chrome DevTools لقياس حجم الصفحة. تابع الخطوات التالية:

1. افتح DevTools في Chrome.
2. انتقل إلى علامة التبويب “Network”.
3. قم بتحديث الصفحة (بالضغط على Ctrl + R أو Cmd + R) لتحميل كل الموارد.
4. ستظهر لك جميع الموارد التي تم تحميلها خلال تحميل الصفحة، بما في ذلك الصور والملفات النصية وغيرها.
5. يمكنك النقر على عنوان العمود “Size” لترتيب الموارد حسب الحجم.
6. ستظهر لك الصفحة الرئيسية (Document) كما تحتوي على حجمها الكلي.

يمكنك استخدام هذه الطريقة للحصول على فكرة عامة عن حجم الصفحة، ولكن قد لا تكون دقيقة مثل ميزة “Coverage” التي تم ذكرها سابقًا.