📋 محتويات الصفحة
📖 الوصف
Vue DevTools هي الأداة الرسمية لتصحيح أخطاء تطبيقات Vue.js. توفر فهماً عميقاً للمكونات، إدارة الحالة، التوجيه (Router)، وأكثر.
🎯 يستخدم في
مجالات استخدام هذه الأداة
.inspect Vue components
مراقبة State و Getters
تتبع Events & Emitted
فحص Vue Router
Pinia/Vuex inspection
Performance profiling
تتبع Composition API
✨ المميزات
أبرز مميزات هذه الأداة
Components Explorer: شجرة المكونات مع props
data
emits
Vuex/Pinia Store Inspector
Vue Router Inspector: Routes & Navigation
Timeline (Events
Performance)
Composition API tracking (ref
computed
etc.)
Edit State مباشرة
Pinia Integration
Vue 3 SFC support
Support for Vite
Webpack
⚠️ العيوب
نقاط يجب مراعاتها
يتطلب تفعيل DevTools flag في Vue
محدود على Vue (لا يعمل على React)
قد يكون بطيئاً في المشاريع الكبيرة
لا يدعم Production
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
# تثبيت الإضافة:
# Chrome: إضافة من Chrome Web Store
# Firefox: إضافة من Firefox Add-ons
# في مشروع Vue 3:
# vite.config.ts
import vue from '@vitejs/plugin-vue';
export default {
plugins: [vue()],
// الإضافة تعمل تلقائياً في dev mode
};📚 أدوات أخرى في 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
⭐أداة تحليل أداء وجودة المواقع