📋 محتويات الصفحة
📖 الوصف
Chrome DevTools هي مجموعة أدوات متكاملة مدمجة في متصفح Chrome لتصحيح وفحص وتحسين المواقع والتطبيقات. تشمل Elements, Console, Sources, Network, Performance, وغيرها.
🎯 يستخدم في
مجالات استخدام هذه الأداة
فحص وتعديل HTML/CSS مباشرة
تصحيح JavaScript
مراقبة Network requests
تحليل الأداء
فحص Storage (cookies
localStorage)
اختبار Responsive Design
Audit الأمان والأداء
✨ المميزات
أبرز مميزات هذه الأداة
Elements panel لتعديل DOM/CSS
Console لتشغيل JavaScript
Sources للـ debugging
Network لمراقبة الطلبات
Performance لتحليل الأداء
Memory لكشف التسريبات
Application لإدارة Storage
Device Mode للاختبار
⚠️ العيوب
نقاط يجب مراعاتها
خاص بـ Chrome/Chromium فقط
قد يكون معقداً للمبتدئين
بعض الميزات تحتاج خبرة
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
# فتح DevTools:
# F12 أو Cmd+Option+I (Mac) أو Ctrl+Shift+I (Windows)
## الأقسام الرئيسية:
### Elements:
- فحص وتعديل DOM و CSS
- Computed styles
- Computed box model
### Console:
- console.log(), console.error()
- تنفيذ JavaScript
- عرض الأخطاء والتحذيرات
### Network:
- مراقبة كل طلبات الشبكة
- Timing و size
- WebSocket monitoring
### Performance:
- Record performance
- FPS monitoring
- CPU profiling📚 أدوات أخرى في DevTools
قد يعجبك أيضاً
Charles
⭐أداة intercept و debug لشبكة HTTP/HTTPS
Charles Proxy
⭐أداة Intercept و Debug لبروتوكول HTTP/HTTPS
Firefox DevTools
⭐أدوات مطوري الويب في Firefox
JSON Server
⭐مولد REST API وهمي (Mock REST API Generator)
Lighthouse
⭐أداة تحليل أداء وجودة المواقع
Miraje
مكتبة محاكاة API في الذاكرة