📋 محتويات الصفحة
📖 الوصف
React DevTools هي إضافة للمتصفح (Chrome, Firefox, Edge, Brave) لفحص شجرة مكونات React، مراقبة props و state، وتتبع الأداء. أداة أساسية لكل مطور React.
🎯 يستخدم في
مجالات استخدام هذه الأداة
فحص مكونات React
مراقبة State و Props
تتبع أداء المكونات (Profiler)
DebuggingHooks
اكتشاف Re-renders غير ضرورية
فحص Fiber Tree
✨ المميزات
أبرز مميزات هذه الأداة
Components Tab: عرض شجرة المكونات
State و Props viewer
Hooks Inspector (useState
useEffect
etc.)
Profiler لتتبع الأداء
Highlight Updates لتحديد الـ Re-renders
Dark/Light Mode
عرض Suspense Boundaries
Support Dev + Production builds
Inspect Element integration
⚠️ العيوب
نقاط يجب مراعاتها
لا يعمل في Production builds (يجب تفعيله يدوياً)
بطيء في المشاريع الكبيرة جداً
قد يؤثر على الأداء
لا يدعم SSR (Next.js) بالكامل
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// تثبيت React DevTools:
// Chrome/Edge: https://chrome.google.com/webstore
// Firefox: https://addons.mozilla.org
// أو: npm install react-devtools
// في المشروع، استخدم في الكود:
function Counter() {
const [count, setCount] = useState(0);
// من React DevTools يمكنك:
// - رؤية count value
// - تعديل count
// - رؤية re-render count
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
// Profiler API:
<Profiler id="App" onRender={onRenderCallback}>
<App />
</Profiler>
function onRenderCallback(
id, phase, actualDuration, baseDuration, startTime, commitTime, interactions
) {
console.log(`${id} rendered in ${actualDuration}ms`);
}📚 أدوات أخرى في DevTools
قد يعجبك أيضاً
Charles
⭐أداة intercept و debug لشبكة HTTP/HTTPS
Charles Proxy
⭐أداة Intercept و Debug لبروتوكول HTTP/HTTPS
Chrome DevTools
⭐أدوات مطوري الويب المتكاملة
Firefox DevTools
⭐أدوات مطوري الويب في Firefox
JSON Server
⭐مولد REST API وهمي (Mock REST API Generator)
Lighthouse
⭐أداة تحليل أداء وجودة المواقع