📋 محتويات الصفحة
📖 الوصف
React DevTools هي مجموعة أدوات تطوير مخصصة لمطوري React، متاحة كإضافة للمتصفح. تتيح فحص مكون React، عرض Props و State، وتتبع Re-renders. تشمل React DevTools: Components Panel، Profiler Panel، و Settings. تُعد الأداة الأساسية لكل مطور React.
🎯 يستخدم في
مجالات استخدام هذه الأداة
React Component Inspection
Props & State Debugging
Performance Profiling
Render Tracking
Component Hierarchy
✨ المميزات
أبرز مميزات هذه الأداة
Easy مخصص لـ React
easy Components Panel
easy Profiler
easy Props/State
easy Performance
easy Free
easy Open Source
⚠️ العيوب
نقاط يجب مراعاتها
React فقط
قد يكون بطيئاً
يحتاج إضافة
محدود في الميزات المتقدمة
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// تثبيت React DevTools
// 1. افتح Chrome Web Store
// 2. ابحث عن "React Developer Tools"
// 3. ثبت الإضافة
// 4. افتح DevTools (F12)
// 5. اختر React Panel
// استخدام Profiler
// 1. افتح React DevTools
// 2. اختر Profiler
// 3. ابدأ التسجيل
// 4. تفاعل مع التطبيق
// 5. أوقف التسجيل
// أو من الكود
import { Profiler } from 'react'
function onRenderCallback(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
interactions
) {
console.log(`${id} rendered in ${actualDuration}ms`)
}
<Profiler id="App" onRender={onRenderCallback}>
<App />
</Profiler>📚 أدوات أخرى في Debugging
قد يعجبك أيضاً
Charles Proxy
⭐HTTP Proxy/debugging tool
Chrome DevTools
⭐أدوات التطوير المدمجة في Chrome
Debug Proxy
⭐مكتبة Debug لـ Node.js
Firefox DevTools
⭐أدوات التطوير المدمجة في Firefox
Mitmproxy
⭐HTTP Proxy للتشفير والفحص
Redux DevTools
⭐أدوات التطوير لـ Redux