React Academy · درس

تثبيت React DevTools وفتحها

أعدّوا React DevTools في Chrome/Firefox وتنقّلوا في لوحة Components

تثبيت React DevTools وفتحها درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مرحبًا

ستثبّتون في هذا الدرس إضافة React DevTools للمتصفح، وستتعلّمون التنقّل في لوحة Components لفحص تطبيق React قيد التشغيل.

ما هي React DevTools؟

React DevTools هي إضافة للمتصفح تضيف لوحتين جديدتين إلى أدوات DevTools في Chrome/Firefox: **Components** (لفحص الشجرة) و**Profiler** (لقياس الأداء). وهي تعمل مع أي تطبيق React في وضع التطوير.

تثبيت الإضافة

انتقلوا إلى Chrome Web Store (أو Firefox Add-ons) وابحثوا عن **React Developer Tools**. انقروا على **Add to Chrome** (أو زر Firefox). سيضيء رمز React في شريط الأدوات لديكم في الصفحات التي تستخدم React.

فتح DevTools

اضغطوا على **F12** (أو Cmd+Option+I على Mac) لفتح DevTools في المتصفح. سترون علامتي تبويب جديدتين تحملان اسمَي **Components** و**Profiler** إلى جانب Elements وConsole.

لوحة Components

تعرض علامة التبويب Components شجرة مكوّنات React الكاملة للصفحة الحالية. يمكنكم النقر على أي مكوّن لفحص خصائصه وحالته وخطافاته وملف المصدر الذي عرضه.

التنقّل في الشجرة

استخدموا مربع البحث أعلى لوحة Components للتصفية حسب اسم المكوّن. انقروا على مكوّن في الشجرة لرؤية تفاصيله على الجانب الأيمن. استخدموا الأسهم لتوسيع المكوّنات الفرعية أو طيّها.

فحص الخصائص مباشرةً

عند النقر على مكوّن، تظهر **props** الحالية في الجزء الأيمن. ويمكنكم حتى تعديل قيم الخصائص مباشرةً في DevTools لمعاينة تغييرات واجهة المستخدم دون تعديل الشفرة المصدرية.

فحص الحالة والخطافات

ستظهر أسفل الخصائص **hooks** مثل State وEffect وMemo وRef. يؤدي توسيع State إلى عرض القيمة الحالية لكل استدعاء لـ useState في ذلك المكوّن.

متطلب وضع التطوير

تعرض React DevTools أسماء المكوّنات فقط عندما يعمل التطبيق في **development mode**. في إصدارات الإنتاج، تزيل React أسماء المكوّنات لتقليل حجم الحزم، لذلك احرصوا دائمًا على تصحيح الأخطاء محليًا باستخدام npm start أو npm run dev.

تمييز التحديثات

فعّلوا **Highlight updates when components render** في إعدادات DevTools (رمز الترس). ستومض المكوّنات التي يُعاد عرضها بتراكب لوني، ما يجعل عمليات إعادة العرض غير الضرورية مرئية فورًا.

تحقّق سريع

ما علامتا التبويب اللتان تضيفهما إضافة React DevTools إلى أدوات مطوّري المتصفح؟

مراجعة

لقد ثبّتّم React DevTools واستكشفتم لوحة Components. يمكنكم الآن فحص شجرة المكوّنات، وقراءة الخصائص والحالة مباشرةً، وتعديل القيم في مكانها، وتمييز عمليات إعادة العرض، وكل ذلك دون لمس الشفرة المصدرية.

الدرس التالي: **Inspecting Component Trees & Props** — ستتعمّقون في التسلسلات الهرمية المتداخلة، وستتعلّمون قراءة أشكال الخصائص والحالة المعقّدة في الشريط الجانبي لـ DevTools.

الأسئلة الشائعة

هل درس «تثبيت React DevTools وفتحها» مجاني؟

نعم — نص درس «تثبيت React DevTools وفتحها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «تثبيت React DevTools وفتحها»؟

أعدّوا React DevTools في Chrome/Firefox وتنقّلوا في لوحة Components تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «تثبيت React DevTools وفتحها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Academy