Chrome DevTools: Elements وConsole وNetwork
تنقّل في لوحات Elements وConsole وNetwork لفحص الأنماط وتصحيح أخطاء JavaScript ومراقبة طلبات HTTP.
Chrome DevTools: Elements وConsole وNetwork درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
فتح DevTools بكفاءة
انقروا بزر الفأرة الأيمن فوق أي عنصر واختاروا Inspect لفتح DevTools مع تحديد ذلك العنصر. يبدّل F12 عرض اللوحة. يفتح Cmd+Shift+C على أجهزة Mac أو Ctrl+Shift+C على Windows وضع الفحص مباشرةً من دون فتح اللوحة كاملة.
لوحة Elements — مفتش DOM
تعرض لوحة Elements شجرة DOM الحية التي جرى تحليلها، وليس مصدر HTML الخام. وهي تعكس التعديلات التي يجريها JavaScript. مرّروا المؤشر فوق العقد لتمييزها في الصفحة، وانقروا نقرًا مزدوجًا لتحرير HTML مباشرةً.
لوحتا Styles وComputed
عند تحديد عنصر، تعرض لوحة Styles جميع قواعد CSS المطبقة مرتبةً حسب درجة التخصيص. وتكون القواعد المشطوبة قد تجاوزتها قواعد أخرى. أما لوحة Computed فتعرض القيم النهائية المحسوبة لكل خاصية.
فرض حالات العناصر
انقروا زر :hov في لوحة Styles لفرض حالة CSS مثل :hover أو :focus أو :active أو :visited. وبذلك يمكنكم فحص أنماط التحويم من دون إبقاء المؤشر ثابتًا تمامًا.
عارض نموذج الصندوق
تعرض لوحة Computed مخططًا تفاعليًا لنموذج الصندوق: المحتوى، والحشوة، والحد، والهامش. مرّروا المؤشر فوق كل منطقة لرؤية قيمتها، وانقروا لتحرير قيم الهامش والحشوة مباشرةً.
أساسيات Console — تسجيل الرسائل وتشغيل التعليمات البرمجية
تعرض Console الأخطاء والتحذيرات والسجلات. اكتبوا أي تعبير JavaScript واضغطوا Enter لتقييمه على الصفحة الحية. استخدموا Console كبيئة REPL تفاعلية لاختبار مقتطفات التعليمات البرمجية فورًا.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())أساليب Console API
إلى جانب console.log: console.warn() للتحذير باللون الأصفر، وconsole.error() باللون الأحمر، وconsole.table() لعرض المصفوفة أو الكائن في جدول، وconsole.group() وconsole.groupEnd() لتجميع المخرجات، وconsole.time() لقياس الوقت.
نظرة عامة على لوحة Network
يظهر كل طلب HTTP، بما في ذلك HTML وJS وCSS والصور وXHR وFetch، في صف. وتعرض الأعمدة الطريقة والحالة والحجم والتوقيت. انقروا فوق أي صف لرؤية تفاصيل الطلب والاستجابة كاملةً.
تصفية طلبات Network
استخدموا شريط التصفية للبحث حسب عنوان URL أو للتصفية حسب النوع: All وXHR/Fetch وJS وCSS وImg وMedia وFont وWS. وتكون تصفية XHR/Fetch الأكثر فائدة عند تصحيح استدعاءات API من JavaScript.
فحص الطلب والاستجابة
حدّدوا طلبًا من طلبات الشبكة لرؤية ما يلي: Headers، أي ترويسات الطلب والاستجابة؛ وPreview، أي JSON أو HTML المنسّق؛ وResponse، أي النص الخام؛ وTiming، أي مراحل الاتصال. تعرض علامة التبويب Payload معلمات نص الطلب POST.
تقييد السرعة — محاكاة الشبكات البطيئة
انقروا القائمة المنسدلة الخاصة بتقييد السرعة، وقيمتها الافتراضية No throttling، لمحاكاة Slow 3G أو Fast 3G أو Offline. ويمنع مربع الاختيار Disable cache المتصفح من استخدام الموارد المخزنة مؤقتًا أثناء الاختبار.
اختبار سريع
أين يمكنكم في Chrome DevTools رؤية جميع قواعد CSS المطبقة على عنصر محدد، بما في ذلك القواعد التي تجاوزتها قواعد أخرى؟
مراجعة: لوحات Chrome DevTools
Elements: فحص DOM وCSS الحيين وتحريرهما، وفرض الحالات الزائفة لفحص أنماط التحويم. Console: تسجيل الرسائل وتصحيح الأخطاء وتشغيل JS مباشرةً. Network: مراقبة جميع طلبات HTTP وفحص الترويسات والاستجابات وتقييد السرعة لمحاكاة الاتصالات البطيئة.
الأسئلة الشائعة
هل درس «Chrome DevTools: Elements وConsole وNetwork» مجاني؟
نعم — نص درس «Chrome DevTools: Elements وConsole وNetwork» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «Chrome DevTools: Elements وConsole وNetwork»؟
تنقّل في لوحات Elements وConsole وNetwork لفحص الأنماط وتصحيح أخطاء JavaScript ومراقبة طلبات HTTP. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «Chrome DevTools: Elements وConsole وNetwork»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Chrome DevTools: Elements وConsole وNetwork
- VSCode: الإضافات واختصارات Emmet
- إعداد Prettier وESLint
- توافق المتصفحات وcaniuse.com