هل تستخدم console.log() لتصحيح كل خطأ في كودك؟ إذا كانت إجابتك نعم، فأنت تضيع 80% من وقتك. Chrome DevTools هي أقوى أداة مجانية يمتلكها أي مطور ويب، لكن معظم المطورين يستخدمون أقل من 10% من إمكانياتها.
في هذا الدليل الشامل، سنغطي كل ما تحتاجه لتحول من مبتدئ في DevTools إلى محترف يصحح الأخطاء ويحلل الأداء بسرعة البرق.
⚡ حقيقة: المطور المحترف يستخدم DevTools ليس فقط لتصحيح الأخطاء، بل لتحليل الأداء، فحص الشبكة، محاكاة الأجهزة، وتحسين تجربة المستخدم — كل ذلك في أداة واحدة مدمجة في المتصفح.
🚪 فتح DevTools
هناك عدة طرق لفتح DevTools:
🔍 لوحة العناصر (Elements Panel)
هذه هي اللوحة الأكثر استخداماً. تتيح لك فحص وتعديل HTML و CSS في الوقت الفعلي.
🎯 فحص العنصر (Inspect Element)
انقر بزر الماوس الأيمن على أي عنصر في الصفحة واختر "Inspect" أو استخدم Ctrl + Shift + C ثم انقر على العنصر. ستظهر شجرة DOM مع جميع خصائص CSS المطبقة.
✏️ التعديل المباشر
يمكنك تعديل HTML و CSS مباشرة في DevTools:
- انقر نقراً مزدوجاً على أي نص HTML لتعديله
- انقر على أي خاصية CSS لتغيير قيمتها
- استخدم H لإخفاء/إظهار العنصر
- استخدم Delete لحذف العنصر
التعديلات هنا مؤقتة — تختفي عند إعادة تحميل الصفحة.
🎨 تجربة الألوان والتصاميم
انقر على أي لون في CSS لفتح Color Picker. يمكنك:
- اختيار الألوان باستخدام Eyedropper
- تبديل بين HEX, RGB, HSL
- معاينة Contrast Ratio للوصولية (Accessibility)
📐 Flexbox & Grid Inspector
في 2026، أضاف Chrome أدوات رائعة لفحص Flexbox و Grid:
- ابحث عن أيقونة flex أو grid بجانب العنصر في DOM
- انقر عليها لرؤية خطوط التوجيه المرئية
- تعديل خصائص align-items, justify-content مباشرة
💻 لوحة الكونسول (Console Panel)
Console ليست فقط لـ console.log(). إليك الاستخدامات المتقدمة:
أوامر Console المتقدمة
console.table(users);
// تجميع الرسائل
console.group("تحميل البيانات");
console.log("جاري الاتصال...");
console.log("تم الاتصال");
console.groupEnd();
// قياس الوقت
console.time("عملية");
// ... الكود
console.timeEnd("عملية"); // عملية: 2.345ms
// عداد
console.count("نقرة");
console.count("نقرة");
console.countReset("نقرة");
// التأكد من الشروط
console.assert(x > 0, "x يجب أن يكون موجباً");
// تتبع مصدر الاستدعاء
console.trace();
استخدام Console كـ Calculator
Console يمكن استخدامه كآلة حاسبة متقدمة:
2 ** 10 // 1024
Math.sqrt(144) // 12
Date.now() // الطابع الزمني الحالي
document.title // عنوان الصفحة الحالية
// فحص DOM
document.querySelectorAll("a").length // عدد الروابط
$$("img") // اختصار لـ querySelectorAll
$0 // آخر عنصر تم فحصه
$1 // العنصر قبل الأخير
🌐 لوحة الشبكة (Network Panel)
هذه اللوحة تكشف كل شيء عن طلبات HTTP — الأداء، الأخطاء، الحجم، والتسلسل الزمني.
📊 قراءة Waterfall Chart
كل شريط في الرسم البياني يمثل طلباً:
- الأبيض: الانتظار في الطابور (Queueing)
- الرمادي: DNS Lookup
- البرتقالي: الاتصال (Connection)
- الأخضر: الانتظار للاستجابة (Waiting)
- الأزرق: تحميل المحتوى (Content Download)
🐢 محاكاة سرعة بطيئة
اختبر موقعك على شبكة 3G:
- افتح Network Panel
- انقر على القائمة المنسدلة "Online"
- اختر "Fast 3G" أو "Slow 3G"
- أعد تحميل الصفحة (Ctrl + R)
📸 تصوير لقطات الشاشة
يمكنك التقاط لقطة لأي عنصر أو الصفحة كاملة:
- افتح Command Menu: Ctrl + Shift + P
- اكتب "screenshot"
- اختر "Capture full size screenshot" للصفحة كاملة
- أو "Capture node screenshot" للعنصر المحدد
⚡ لوحة الأداء (Performance Panel)
هذه اللوحة الأكثر قوة لتحليل أداء موقعك وقياس Core Web Vitals.
تسجيل أداء الصفحة
- افتح Performance Panel
- انقر على الزر الدائري "Record" 🔴
- تفاعل مع الصفحة (تمرير، نقرة، كتابة)
- انقر على "Stop" ⏹ بعد 3-5 ثوانٍ
قراءة النتائج
بعد التسجيل، ستظهر لك:
- FPS: معدل الإطارات — يجب أن يكون 60fps
- CPU: استهلاك المعالج — الأخضر = جيد، الأحمر = مشكلة
- NET: طلبات الشبكة
- Main: خيط JavaScript الرئيسي — الأصفر = Scripting، الأرجواني = Rendering
🔍 تحديد مشاكل الأداء
ابحث عن:
- Long Tasks: مهام JavaScript تستغرق أكثر من 50ms
- Forced Reflow: قراءة خصائص DOM بعد تعديلها
- Layout Thrashing: تكرار القراءة والكتابة على DOM
- Heavy Paint: رسومات معقدة تستهلك GPU
🔦 Lighthouse: التدقيق الشامل
Lighthouse هو أداة مدمجة في DevTools تعطيك تقريراً كاملاً عن جودة موقعك في 5 مجالات.
تشغيل Lighthouse
- افتح Lighthouse Panel (أو اضغط F12 → Lighthouse)
- اختر ما تريد قياسه:
- ✅ Performance (الأداء)
- ✅ Accessibility (الوصولية)
- ✅ Best Practices (أفضل الممارسات)
- ✅ SEO (تحسين محركات البحث)
- ✅ PWA (تطبيقات الويب التقدمية)
- اختر الجهاز (Mobile/Desktop)
- انقر "Analyze page load"