انتقل إلى محتوى الدرس

Device Mode and Mobile Preview محاكي شاشات الهواتف والأجهزة

أتقن استخدام أدوات مطور المتصفح DevTools عملياً؛ من فحص وتعديل شجرة DOM ونموذج الصندوق في لوحة Elements، وتشخيص الأخطاء في Console، وتتبع طلبات الشبكة في Network، وتنقيح الكود في Sources.
3 صفوف تعليمية
تكنولوجيا الويب
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تسجل لوحة الشبكة () كل طلب واستجابة يمر بين المتصفح والخادم منذ لحظة فتح الصفحة؛ بدءاً من ملف الرئيسي، وملفات التنسيق والخطوط والصور، وصولاً إلى طلبات الخلفية.

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

تأمل مخطط لوحة الشبكة الآتي ثم جرّب محاكي أدوات المطور التفاعلي:

الصف 2 صورة توضيحية
مخطط تشريح لوحة الشبكة Network Waterfall ومراحل التوقيت الزمني ومحاكاة الأجهزة
الصف 3 معاينة حية