أدوات المطور: فتح DevTools واستخدامها
افتح Chrome DevTools، وافحص العناصر، واقرأ وحدة التحكم، وراقب طلبات الشبكة، وعدّل CSS مباشرة في المتصفح.
أدوات المطور: فتح DevTools واستخدامها درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما أدوات DevTools في المتصفح؟
تأتي كل المتصفحات الحديثة مزودةً بمجموعة مدمجة من أدوات المطورين. تتيح لكم DevTools فحص HTML وCSS، وتصحيح أخطاء JavaScript، وتحليل الأداء، ومراقبة طلبات الشبكة، وغير ذلك الكثير — وكل ذلك من دون مغادرة المتصفح.
فتح DevTools
افتحوا DevTools باستخدام F12 (Windows/Linux) أو Cmd+Option+I (Mac). ويمكنكم أيضًا النقر بزر الفأرة الأيمن على أي عنصر واختيار Inspect. ويفتح الاختصار Ctrl+Shift+J / Cmd+Option+J لوحة Console مباشرةً.
لوحة Elements
تعرض Elements panel شجرة DOM الحية. انقروا على أي عنصر لتحديده وعرض أنماطه المحسوبة في لوحة Styles. ويمكنكم النقر نقرًا مزدوجًا لتحرير قيم HTML أو CSS في الوقت الفعلي — فالتغييرات فورية، لكنها لا تُحفظ في ملفكم.
تحرير CSS مباشرةً
في لوحة Styles، انقروا على قيمة أي خاصية لتغييرها. أضيفوا قواعد جديدة باستخدام زر +. واستخدموا مربعات التبديل لتعطيل القواعد. وهذه أسرع طريقة لإنشاء نموذج أولي لـ CSS من دون الانتقال إلى محرر النصوص.
لوحة Console
تعرض Console الرسائل المسجّلة والتحذيرات والأخطاء. ويمكنكم أيضًا كتابة JavaScript مباشرةً وتنفيذها. استخدموا console.log() وconsole.warn() وconsole.error() وconsole.table() لإخراج البيانات أثناء تصحيح الأخطاء.
// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');لوحة Network
تعرض Network panel كل طلب HTTP تجريه الصفحة. حدّدوا طلبًا لعرض ترويساته، ومعاينة جسم الاستجابة، وفحص مخطط التوقيت المتتابع. ويمكنكم التصفية حسب النوع: XHR/Fetch وJS وCSS وImages وFonts.
قراءة توقيت الطلب
يعرض كل طلب المراحل التالية: Queued وDNS Lookup وInitial Connection وSSL وRequest Sent وWaiting (TTFB) وContent Download. ويعبّر TTFB (Time To First Byte) عن زمن استجابة الخادم.
تقييد سرعة الشبكة
استخدموا قائمة التقييد المنسدلة في لوحة Network لمحاكاة ظروف شبكة 3G البطيئة أو عدم الاتصال بالإنترنت. يكشف ذلك مشكلات الأداء غير الظاهرة على اتصالات النطاق العريض السريعة، ويساعدكم على بناء تجارب تعمل للمستخدمين ذوي الاتصالات الضعيفة.
وضع الجهاز
انقروا على رمز الجهاز (Ctrl+Shift+M / Cmd+Shift+M) للدخول إلى Device Mode. يمكنكم محاكاة إطارات عرض الهاتف المحمول، وDPR، وأحداث اللمس، وظروف الشبكة. اختاروا إعدادًا مسبقًا مثل iPhone 14 أو عيّنوا عرضًا مخصصًا.
لوحة Sources
تتيح لكم Sources panel قراءة نقاط التوقف وتعيينها في ملفات JavaScript. توقف نقطة التوقف التنفيذ مؤقتًا، حتى تتمكنوا من فحص قيم المتغيرات ومكدس الاستدعاءات والتنقل عبر الكود سطرًا سطرًا باستخدام F10 (التنفيذ فوق السطر) وF11 (الدخول إلى الدالة).
نقاط التوقف ومصحح الأخطاء
أضف نقطة توقف بالنقر على رقم السطر في Sources. عند إيقاف التنفيذ مؤقتًا، مرّر المؤشر فوق المتغيرات لرؤية قيمها أو اكتب أسماءها في Console. استخدم جزء مكدس الاستدعاءات لمعرفة الدوال التي أدّت إلى هذه النقطة.
// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is openاختبار سريع
أي لوحة في DevTools تعرض جميع طلبات HTTP التي تجريها الصفحة، بما في ذلك رموز الحالة وأوقات الاستجابة؟
مراجعة: أدوات DevTools لتصحيح الأخطاء
Elements: افحص DOM المباشر وحرّره. Console: سجّل JavaScript وشغّله. Network: راقب حركة HTTP. Sources: عيّن نقاط التوقف وصحّح الأخطاء. Device Mode: اختبر التخطيطات المتجاوبة. سيؤدي إتقان هذه اللوحات الأربع إلى تغيير سير عمل تصحيح الأخطاء لديك.
الأسئلة الشائعة
هل درس «أدوات المطور: فتح DevTools واستخدامها» مجاني؟
نعم — نص درس «أدوات المطور: فتح DevTools واستخدامها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «أدوات المطور: فتح DevTools واستخدامها»؟
افتح Chrome DevTools، وافحص العناصر، واقرأ وحدة التحكم، وراقب طلبات الشبكة، وعدّل CSS مباشرة في المتصفح. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «أدوات المطور: فتح DevTools واستخدامها»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- المتصفحات وDNS وHTTP: دورة حياة الطلب
- HTML وCSS وJavaScript: مهمة كل طبقة
- كيف تُصيّر الصفحة: تحليل DOM وCSSOM والتخطيط والرسم
- أدوات المطور: فتح DevTools واستخدامها