📋 محتويات الصفحة
📖 الوصف
Redux DevTools هي إضافة المتصفح الأساسية لفحص وتصحيح State Management في تطبيقات Redux (وتطبيقات Zustand, Jotai, NgRx، وغيرهم).
🎯 يستخدم في
مجالات استخدام هذه الأداة
فحص تغييرات الـ State
Time Travel Debugging
تتبع Actions
مراقبة Redux slices
إعادة تشغيل Actions
تصدير State
✨ المميزات
أبرز مميزات هذه الأداة
State Inspector (شجري وجداول)
Action Log (كل Action مع Payload و Previous State)
Time Travel: العودة لأي لحظة زمنية
Diff viewer (Previous vs Next state)
Dispatch Actions من الواجهة
Export/Import State كـ JSON
Support Persistence (localStorage)
Trace: تتبع استدعاءات الـ dispatch
Support non-Redux stores (Zustand
Jotai)
⚠️ العيوب
نقاط يجب مراعاتها
يتطلب إعداد Redux في المشروع
قد يكون معقداً للمبتدئين
بطيء في المشاريع مع State كبير
لا يدعم SSR مباشرة
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// تثبيت:
npm install @redux-devtools/extension
// في store:
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: { /* your reducers */ },
devTools: process.env.NODE_ENV !== 'production',
});
// في المتصفح:
// 1. افتح DevTools → Redux tab
// 2. يمكنك:
// - رؤية كل action
// - العودة لأي حالة سابقة (Time Travel)
// - تعديل state مباشرة
// - Dispatch actions
// - تصدير state كملف📚 أدوات أخرى في 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
⭐أداة تحليل أداء وجودة المواقع