في هذا الدرس 8تصفّح المواضيع
بعد أن فهمنا في الدرس السابق كيف يبني المتصفح شجرتي و ويرسم الصفحة، كيف يمكنك كمطور أن ترى هذه الهياكل الحية بعينك وتختبر تعديلها لحظياً؟ يأتي كل متصفح حديث مزوداً بمختبر هندسي متكامل مدمج بداخله يُسمى أدوات مطور المتصفح (). بمجرد الضغط على زر أو النقر بالزر الأيمن واختيار فحص العنصر ()، تفتح غرفة العمليات الأساسية لكل مطور ويب.
قبل الغوص في التفاصيل الهندسية، استعرض جدول المصطلحات التقنية الأساسية لهذا الدرس:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى الهندسي المبسط |
|---|---|---|---|
| أدوات مطور المتصفح | براوزر ديف تولز | مجموعة الأدوات التشخيصية المدمجة في المتصفح لفحص الكود الحي والشبكة والأداء والتخزين. | |
| لوحة العناصر والتنسيقات | إليمنتس بانل | اللوحة المخصصة لعرض شجرة DOM الحية وتعديل قواعد CSS ونموذج الصندوق لحظياً. | |
| نموذج الصندوق الهندسي | بوكس موديل | التمثيل الهندسي لأي عنصر في الصفحة: المحتوى الداخلي ثم الحشو فالإطار فالهامش الخارجي. | |
| لوحة الطرفية التفاعلية | كونسول بانل | شاشة عرض سجلات الأخطاء والتحذيرات وتنفيذ أوامر JavaScript التفاعلية مباشرة على الصفحة. | |
| شلال طلبات الشبكة | نيتورك ووترفول | المخطط الزمني في لوحة Network الذي يعرض كل طلب HTTP وحالته وحجمه وتفصيل وقت استجابته. | |
| نقطة التوقف البرمجية | بريك بوينت | علامة يضعها المطور في لوحة Sources لإيقاف تنفيذ كود JavaScript عند سطر معين وفحص المتغيرات. |
تعرض لوحة العناصر ( وتُسمى في فايرفوكس) شجرة الحية الموجودة في ذاكرة المتصفح حالياً، وليس مجرد النص الخام القادم من الخادم. فإذا أضاف كود جافاسكريبت نافذة منبثقة أو غيّر نص زر، ستشاهد التغيير فوراً داخل هذه اللوحة.
- التعديل اللحظي للعقد: يمكنك النقر المزدوج على أي نص أو سمة لتعديلها فوراً، أو سحب العناصر لإعادة ترتيبها، أو الضغط على حرف لإخفاء العنصر المحدد وإظهاره.
- الفرق بين عرض المصدر وفحص العنصر: خيار عرض مصدر الصفحة () يعرض النص الأصلي الخام كما أرسله الخادم، بينما فحص العنصر () يعرض شجرة الحية بعد تنفيذ السكربتات.
بجوار شجرة العناصر، تتيح لك نافذتا التنسيقات () والقيم المحسوبة () تشخيص كل قاعدة مطبقة على العنصر المحدد بدقة:
- كشف القواعد الملغاة بالأولوية: تظهر القواعد التي تم تجاوزها بقاعدة أقوى مشطوبة بخط أفقي، مما يفسر لك فوراً لماذا لم يظهر لون أو حجم معين.
- تثبيت الحالات التفاعلية (): يمكنك تفعيل حالة أو أو بنقرة زر لفحص تنسيق الأزرار والقوائم دون الحاجة لإبقاء مؤشر الفأرة فوقها.
- مخطط نموذج الصندوق القياسي (): يعرض الأبعاد المحسوبة بالبكسل للطبقات الأربع لكل عنصر: المحتوى ()، ثم الحشو الداخلي ()، ثم الإطار ()، ثم الهامش الخارجي ().
تؤدي لوحة الطرفية () وظيفتين أساسيتين لا غنى عنهما: الأولى هي عرض أخطاء التشغيل والتحذيرات مع رقم السطر البرمجي الذي سبب المشكلة، والثانية هي العمل كبيئة تنفيذ تفاعلية فورية () تكتب فيها أوامر لتجربتها مباشرة على الصفحة المفتوحة:
// 1. Inspect the currently selected element in Elements panel ($0):
console.log("Selected Node:", $0);
// 2. Display structured arrays/objects as a sortable table:
console.table([
{ panel: "Elements", shortcut: "Ctrl+Shift+C" },
{ panel: "Console", shortcut: "Ctrl+Shift+J" }
]);تسجل لوحة الشبكة () كل طلب واستجابة يمر بين المتصفح والخادم منذ لحظة فتح الصفحة؛ بدءاً من ملف الرئيسي، وملفات التنسيق والخطوط والصور، وصولاً إلى طلبات الخلفية.
- أهم خيارين للمطور أثناء العمل: تفعيل خيار تعطيل الذاكرة المخبأة () لضمان جلب أحدث تعديلاتك من الخادم دائماً، وتفعيل خيار الاحتفاظ بالسجل () عند تتبع عمليات إعادة التوجيه أو تسجيل الدخول.
- قراءة الشلال الزمني (): يفصّل الشريط الزمني لكل طلب وقت استعلام ، ومصافحة الاتصال، وزمن انتظار أول بايت من الخادم ()، وزمن تنزيل الملف.
تأمل مخطط لوحة الشبكة الآتي ثم جرّب محاكي أدوات المطور التفاعلي:
عندما تواجه خطأً منطقياً معقداً في كود ، فإن الاكتفاء بطباعة عشرات عبارات يكون بطيئاً وغير عملي. توفر لوحة المصادر ( وتُسمى في فايرفوكس) منقحاً تفاعلياً احترافياً:
- نقاط التوقف () والأمر : انقر على رقم أي سطر برمجي (أو اكتب الأمر في الكود) ليتوقف المتصفح تلقائياً عند الوصول لتلك النقطة.
- التنقل خطوة بخطوة وفحص النطاق (): أثناء توقف الكود، يمكنك قراءة قيم جميع المتغيرات الحية في نافذة ، وتنفيذ الكود سطراً بسطر عبر أزرار و.
تُعدّ لوحة التطبيق ( وتُسمى في فايرفوكس) غرفة التحكم الخاصة بفحص جميع البيانات المحفوظة محلياً داخل المتصفح:
- فحص ملفات الكوكيز (): استعراض اسم وقيمة وتاريخ انتهاء كل ملف كوكي، والتحقق من تفعيل رايات الحماية الأمنية ( و و).
- التخزين المحلي والجلسي (): معاينة وتعديل الأزواج المخزنة محلياً مثل تفضيل المظهر الفاتح/الداكن أو المسودات المؤقتة.
- مسح بيانات الموقع (): زر عملي يمسح جميع البيانات المخزنة للموقع الحالي بنقرة واحدة لاختبار الموقع كزائر جديد تماماً.
قبل نشر أي صفحة ويب للمستخدمين، يعتمد المطور المحترف على أداتين مدمجتين في لضمان التجاوب والجودة القياسية:
- 1. شريط محاكاة الأجهزة والشاشات (): يتيح لك اختبار مظهر الموقع على مختلف أبعاد الهواتف الذكية والأجهزة اللوحية، ومحاكاة اللمس وكثافة البكسلات للتحقق من عدم وجود أي خروج أفقي للعناصر عن الشاشة.
- 2. مدقق الجودة الآلي (): يفحص الصفحة آلياً ويمنحها تقييماً من إلى في أربعة محاور هندسية: الأداء والسرعة ()، وإمكانية الوصول ()، وأفضل الممارسات والأمان ()، وتهيئة محركات البحث ().
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنّا في هذا الدرس استخدام أدوات مطور المتصفح () عبر لوحاتها الأساسية: فحص شجرة ونموذج الصندوق في ، والتشخيص التفاعلي في ، وتحليل شلال الطلبات في ، ونقاط التوقف في ، وفحص الكوكيز والتخزين في ، ومحاكاة الهواتف وفحص الجودة عبر . الخطوة التالية: انتقل الآن إلى الدرس التالي امتدادات الملفات وأنواع ملفات الويب () للتعرف بعمق على أنواع الملفات التي يتعامل معها المتصفح ونظام التشغيل!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات12
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Browser Developer Tools (DevTools) أدوات مطور المتصفح DevTools
- المختبر الهندسي المدمج داخل المتصفحات الحديثة لفحص شجرة DOM وتنقيح الكود ومراقبة طلبات الشبكة وقياس الأداء.
- للمراجعة
- 02 Elements / Inspector Panel لوحة العناصر Elements
- لوحة أدوات المطور المخصصة لعرض وتعديل شجرة DOM الحية في الذاكرة وقواعد تنسيق CSS المطبقة عليها.
- للمراجعة
- 03 CSS Box Model نموذج الصندوق في CSS
- الطبقات الهندسية الأربع التي يتكون منها أي عنصر على الشاشة: المحتوى، الحشو الداخلي، الإطار، والهامش الخارجي.
- للمراجعة
- 04 Console Panel (REPL) لوحة الطرفية التفاعلية Console
- شاشة رصد الأخطاء والتحذيرات وتنفيذ أوامر جافاسكريبت التفاعلية مباشرة على الصفحة المفتوحة.
- للمراجعة
- 05 Network Waterfall الشلال الزمني لطلبات الشبكة
- المخطط الزمني في لوحة الشبكة الذي يفصل مراحل استغراق كل طلب من DNS وTLS حتى استلام أول بايت TTFB وتنزيل المحتوى.
- للمراجعة
- 06 Time to First Byte (TTFB) زمن وصول أول بايت TTFB
- الزمن المستغرق منذ إرسال الطلب للخادم وحتى وصول أول بايت من الاستجابة، ويقيس سرعة معالجة الخادم والشبكة.
- للمراجعة
- 07 Breakpoint نقطة التوقف البرمجية
- علامة توقف يضعها المطور على سطر برمجي في لوحة Sources لتجميد التنفيذ لحظياً وفحص قيم المتغيرات.
- للمراجعة
- 08 Application / Storage Panel لوحة التطبيق والتخزين Application
- لوحة فحص وإدارة البيانات المحفوظة محلياً في المتصفح مثل الكوكيز وlocalStorage وIndexedDB.
- للمراجعة
- 09 HttpOnly Cookie Flag راية حماية الكوكي HttpOnly
- خاصية أمان تمنع أكواد JavaScript من قراءة ملف الكوكي لحماية جلسة المستخدم من السرقة عبر ثغرات XSS.
- للمراجعة
- 10 Device Mode (Responsive Toolbar) وضع محاكاة الأجهزة والشاشات
- أداة محاكاة أبعاد شاشات الهواتف والأجهزة اللوحية واللمس وسرعات الشبكة المختلفة داخل المتصفح.
- للمراجعة
- 11 Lighthouse Audit مدقق الجودة الآلي Lighthouse
- أداة فحص آلية مدمجة في المتصفح تقيم سرعة الأداء وإمكانية الوصول وأفضل الممارسات والـ SEO.
- للمراجعة
- 12 Self-XSS ثغرة الاختراق الذاتي عبر الطرفية
- خداع المستخدم بلصق كود خبيث بيده داخل لوحة Console في متصفحه لسرقة بيانات حسابه المفتوح.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 REPL REPL
- Read-Eval-Print Loop
- حلقة القراءة والتنفيذ والطباعة الفورية للأوامر البرمجية في لوحة الطرفية.
- للمراجعة
- 02 TTFB TTFB
- Time to First Byte
- زمن انتظار وصول أول بايت من استجابة الخادم في لوحة الشبكة.
- للمراجعة
- 03 DPR DPR
- Device Pixel Ratio
- نسبة البكسلات الفيزيائية للشاشة إلى البكسلات المنطقية في CSS.
- للمراجعة
- 04 LCP LCP
- Largest Contentful Paint
- مؤشر سرعة رسم أكبر عنصر محتوى مرئي في الشاشة ضمن فحص Lighthouse.
- للمراجعة
- 05 CLS CLS
- Cumulative Layout Shift
- مؤشر قياس استقرار تخطيط الصفحة وعدم قفز العناصر المفاجئ أثناء التحميل.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
انقر بالزر الأيمن على أي زر في الصفحة واختر Inspect، وفعل حالة :hover من زر :hov، واقرأ أبعاد الصندوق الأربع في نافذة Computed.
-
افتح لوحة Network وفعل خيار Disable cache ثم حدث الصفحة، وافحص كود الحالة ونوع المحتوى وزمن TTFB للطلب الرئيسي.
-
افتح لوحة Sources، وضع نقطة توقف على سطر داخل دالة جافاسكريبت، ثم نفذ الحدث على الصفحة وراقب قيم المتغيرات في لوحة Scope.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.