React DevTools
آخر تحديث: 2026-11-03
React DevTools React DevTools
React DevTools هو امتداد المتصفح الرسمي الذي يتيح لك فحص شجرة المكوّنات كما تفحص DOM، وقراءة قيم props والحالة والخطافات لكل مكوّن، واستخدام Profiler لمعرفة أي عملية عرض كانت الأبطأ. وهو أداة أساسية في تصحيح تطبيقات React. ومتى عرفت أين تنظر، يصبح خلل في الحالة يستغرق ساعة كاملة من الفحص مجرّد دقيقتين.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | أدوات |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
التثبيت: ابحث عن "React Developer Tools" في متجر إضافات المتصفح
الفتح: اضغط F12 — يظهر في شريط اللوحات تبويبان جديدان هما Components و Profiler
Components: افحص شجرة المكوّنات و props/state وحدّد المكوّن الذي جرى عرضه
Profiler: سجّل تفاعلاً واحداً وحلّل من عرض في كل إطار وكم استغرقالقيمة المرجعة：لا قيمة معادة — هذه أداة تصحيح هندسية.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
لوحة بخط ثابت تعرض أربعة مستويات متداخلة — App وHeader وTodoList وFooter — مع ملخّص للحالة لكل منها؛ الضغط على أي صف يبرزه ويشير إلى إمكانية فحص خصائصه وحالته هناك، محاكياً تجربة DevTools.💡 النقاط الأساسية
💡 نصيحة بعد اختيار مكوّن في لوحة Components يمكنك تعديل القيم على اليمين: تغيير الحالة يسري فوراً، وهذه طريقة سريعة للتحقق من تفاعل ما.
ℹ️ ملاحظة Profiler هو نقطة الدخول لعمل الأداء: بعد التسجيل، تُعلَّم الإطارات الحمراء الالتزامات البطيئة وتوضّح أي مكوّن كان بطيء العرض.
⚠️ تحذير لوحات DevTools غير متاحة في بناءات الإنتاج (معطّلة افتراضياً)، لذا اربطها ببيئة تطوير.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أثبّت React DevTools؟
ج ابحث عن React Developer Tools في متجر إضافات Chrome أو Edge أو Firefox وثبّتها؛ بعد فتح F12 ستجد تبويبين جديدين هما Components و Profiler.
س لماذا لا تظهر مكوّناتي في DevTools؟
ج الأسباب الشائعة: التبويب الحالي ليس صفحة React في بيئة التطوير، أو الامتداد معطّل، أو الصفحة تعمل ببناء إنتاج بلا دعم تصحيح مفعّل.
س كيف أحلّل الأداء باستخدام Profiler؟
ج اضغط زر التسجيل في Profiler، ونفّذ التفاعل، ثم أوقف؛ وافحص الالتزامات المكلفة في المخطط الشبيهي، وحدّد المكوّنات التي تعيد العرض بلا داعٍ وحسّنها بـ memo.
