شرح صفوف ومحتوى الفقرة
بعد أن فهمنا في الدرس السابق كيف يبني المتصفح شجرتي و ويرسم الصفحة، كيف يمكنك كمطور أن ترى هذه الهياكل الحية بعينك وتختبر تعديلها لحظياً؟ يأتي كل متصفح حديث مزوداً بمختبر هندسي متكامل مدمج بداخله يُسمى أدوات مطور المتصفح (). بمجرد الضغط على زر أو النقر بالزر الأيمن واختيار فحص العنصر ()، تفتح غرفة العمليات الأساسية لكل مطور ويب.
قبل الغوص في التفاصيل الهندسية، استعرض جدول المصطلحات التقنية الأساسية لهذا الدرس:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى الهندسي المبسط |
|---|---|---|---|
| أدوات مطور المتصفح | براوزر ديف تولز | مجموعة الأدوات التشخيصية المدمجة في المتصفح لفحص الكود الحي والشبكة والأداء والتخزين. | |
| لوحة العناصر والتنسيقات | إليمنتس بانل | اللوحة المخصصة لعرض شجرة DOM الحية وتعديل قواعد CSS ونموذج الصندوق لحظياً. | |
| نموذج الصندوق الهندسي | بوكس موديل | التمثيل الهندسي لأي عنصر في الصفحة: المحتوى الداخلي ثم الحشو فالإطار فالهامش الخارجي. | |
| لوحة الطرفية التفاعلية | كونسول بانل | شاشة عرض سجلات الأخطاء والتحذيرات وتنفيذ أوامر JavaScript التفاعلية مباشرة على الصفحة. | |
| شلال طلبات الشبكة | نيتورك ووترفول | المخطط الزمني في لوحة Network الذي يعرض كل طلب HTTP وحالته وحجمه وتفصيل وقت استجابته. | |
| نقطة التوقف البرمجية | بريك بوينت | علامة يضعها المطور في لوحة Sources لإيقاف تنفيذ كود JavaScript عند سطر معين وفحص المتغيرات. |
