📋 محتويات الصفحة
📖 الوصف
Redux DevTools هي مجموعة أدوات تطوير مخصصة لمطوري Redux، متاحة كإضافة للمتصفح. تتيح فحص Redux Store، عرض Actions، وتتبع State Changes. تشمل Redux DevTools: Action Log، State Inspector، Time Travel، و Diff Viewer. تُعد الأداة الأساسية لكل مطور Redux.
🎯 يستخدم في
مجالات استخدام هذه الأداة
Redux State Debugging
Action Tracking
Time Travel Debugging
State History
Performance Profiling
✨ المميزات
أبرز مميزات هذه الأداة
Easy مخصص لـ Redux
easy Action Log
easy Time Travel
easy State Inspector
easy Diff Viewer
easy Free
easy Open Source
⚠️ العيوب
نقاط يجب مراعاتها
Redux فقط
قد يكون بطيئاً
يحتاج إضافة
محدود في الميزات المتقدمة
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// تثبيت Redux DevTools
// 1. افتح Chrome Web Store
// 2. ابحث عن "Redux DevTools"
// 3. ثبت الإضافة
// 4. افتح DevTools (F12)
// 5. اختر Redux Panel
// أو من الكود
import { createStore, compose } from 'redux'
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
rootReducer,
composeEnhancers(
// other middleware
)
)
// استخدام Time Travel
// 1. افتح Redux DevTools
// 2. اختر Action
// 3. ارجع إلى State سابق
// 4. قم بتعديل📚 أدوات أخرى في Debugging
قد يعجبك أيضاً
Charles Proxy
⭐HTTP Proxy/debugging tool
Chrome DevTools
⭐أدوات التطوير المدمجة في Chrome
Debug Proxy
⭐مكتبة Debug لـ Node.js
Firefox DevTools
⭐أدوات التطوير المدمجة في Firefox
Mitmproxy
⭐HTTP Proxy للتشفير والفحص
React DevTools
⭐أدوات التطوير لـ React