انتقل إلى محتوى الدرس

Installing React Developer Tools إضافة أدوات مطوري React

ركّب تطبيق React الحديث عبر دالة createRoot، وافحص نقاء المكونات أثناء التطوير بغلاف StrictMode، واستخدم إضافة React Developer Tools لتشخيص الأخطاء بمهارة.
2 صفوف تعليمية
ReactJS
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

احرص منذ اليوم الأول على تثبيت إضافة React Developer Tools الرسمية لمتصفحات Chrome أو Edge أو Firefox. عند فتح نافذة أدوات المطور (F12) سيظهر تبويبان متخصصان لا غنى عنهما:

  • تبويب Components: يعرض شجرة المكونات المنطقية النظيفة ويتيح فحص الخصائص والحالات الحية لكل مكون في اللحظة نفسها.
  • تبويب Profiler: يسجل جلسات التفاعل ويقيس زمن تصيير كل مكون بالمللي ثانية لاكتشاف أي بطء بدقة.
الصف 2 ملاحظة هامة