ما هي أدوات DevTools؟
DevTools هي مجموعة أدوات مدمجة في معظم المتصفحات (مثل Chrome وFirefox) تساعد المطورين على:
- تحليل أداء تحميل الموقع
- فحص الملفات المحملة مثل CSS وJS
- مراقبة استهلاك الموارد والذاكرة
- تتبع الرسائل والأخطاء في Console
كيفية تحليل الأداء باستخدام DevTools
- افتح موقعك في Google Chrome.
- اضغط F12 أو انقر بزر الفأرة الأيمن واختر "Inspect".
- اذهب إلى تبويب Performance وسجّل جلسة تحميل.
- حلّل النتائج:
- المدة الزمنية للرندر
- تحميل الصور والموارد
- وقت تنفيذ JavaScript
- التفاعلية (Time to Interactive)
أقسام مفيدة أخرى:
- Lighthouse: يعطيك تقريرًا شاملاً عن السرعة، القابلية للاستخدام، وإمكانيات التحسين.
- Network: لمراقبة الطلبات وحجم الملفات.
- Coverage: لمعرفة الأجزاء غير المستخدمة من CSS/JS.
الخلاصة
باستخدام DevTools يمكنك التعرف على نقاط ضعف موقعك بدقة وتحسينها بسرعة.
ابدأ بتسجيل جلسات الأداء، وستلاحظ الفارق في تحسين التجربة.