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

Page Source vs Inspect Element مصدر الصفحة مقابل فحص العنصر

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

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

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

بجوار شجرة العناصر، تتيح لك نافذتا التنسيقات () والقيم المحسوبة () تشخيص كل قاعدة مطبقة على العنصر المحدد بدقة:

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