دليل أداة تصحيح المتصفح (DevTools)

💡 الدور الأساسي

أدوات تطوير المتصفح (DevTools) هي "جهاز الأشعة السينية" و"طاولة العمليات" لتطوير الواجهة الأمامية. تتيح لك رؤية هيكل الصفحة (HTML) ومظهرها (CSS) وجهازها العصبي (JavaScript)، وتسمح لك بتعديلها وتصحيحها في الوقت الفعلي.

1. ما هي DevTools؟

DevTools هي مجموعة أدوات تطوير ويب مدمجة في المتصفحات الحديثة (Chrome, Edge, Firefox, Safari, إلخ). بالنسبة للمطورين، إنها أقرب إلى "الحقيقة" من محرر الكود، لأن ما تعرضه هو كيف يعمل الكود فعلياً في المتصفح.

كيف تفتح DevTools؟

• اختصار لوحة المفاتيح: F12 أو Ctrl + Shift + I (Mac: Cmd + Option + I)
• الفأرة: انقر بزر الأيمن على أي عنصر في الصفحة واختر "Inspect (فحص)".
• القائمة: قائمة الزاوية العلوية اليمنى في المتصفح -> المزيد من الأدوات -> أدوات المطور.

---

2. عرض تفاعلي: محاكي DevTools

لتتعود بسرعة، أنشأنا لوحة DevTools محاكية تعيد إنتاج واجهة تصحيح Chrome. جرّب النقر على زر "▶ بدء الجولة التلقائية" واتبع المؤشر للتعرف على وظائف كل منطقة.

2.1 عرض متقدم: التعديل المباشر (Live Edit)

إحدى أقوى وظائف DevTools هي التعديل في الوقت الفعلي. العرض أدناه يحتوي على "صفحة ويب افتراضية" (أعلاه) و"DevTools" (أسفله).

جرّب التالي:

1. في لوحة Elements أدناه، انقر على عنصر h1 أو button في شجرة DOM.
2. في لوحة Styles على اليمين، عدّل قيم الخصائص في element.style (مثلاً غيّر color إلى red).
3. لاحظ كيف تتغير صفحة الويب الافتراضية أعلاه في الوقت الفعلي.

2.2 تحدٍّ عملي: تعديل نص صفحة حقيقية

الآن بعد أن أتقنت تعديل الأنماط، لننتقل لشيء أكثر إثارة — تعديل الصفحة التي تشاهدها الآن مباشرة!

1. افتح DevTools الحقيقية: اضغط F12 (أو انقر بزر الأيمن على هذا السطر -> اختر "Inspect").
2. حدد العنصر: في لوحة Elements، سترى سطر كود مُبرزاً، وهذا هو النص الذي نقرت عليه للتو.
3. عدّل المحتوى: انقر نقراً مزدوجاً على النص الأسود في سطر الكود، غيّره إلى "أنا هاكر!"، ثم اضغط Enter.
4. شاهد النتيجة: انظر! ألم يتغير النص في الصفحة؟

🤔 لماذا يختفي عند التحديث؟

قد تلاحظ أنك عند تحديث الصفحة، تختفي جميع التعديلات وتعود الصفحة لحالتها الأصلية.

ذلك لأن تعديلات DevTools تحدث فقط في ذاكرة المتصفح المحلية.

• عند زيارة صفحة ويب، ينزل المتصفح كود HTML من خادم بعيد ويجسده محلياً.
• أنت تعدّل فقط النسخة المحلية، وليس لديك صلاحية تعديل الكود المصدري على الخادم.
• لذلك في كل مرة تُحدّث، يعود المتصفح لجلب الكود (غير المعدّل) من الخادم، وكل شيء يعود كما كان.

---

3. شرح مفصل للوحات الرئيسية

3.1 Elements (لوحة العناصر)

الوظيفة: عرض وتعديل HTML و CSS للصفحة في الوقت الفعلي.

• اليسار (شجرة DOM): تعرض بنية HTML للصفحة. يمكنك النقر المزدوج على الوسوم أو النص لتعديلها، وحتى سحب العقد لتغيير مواقعها.
• اليمين (Styles): تعرض أنماط CSS للعنصر المحدد. يمكنك تحديد/إلغاء الأنماط لرؤية التغييرات، أو تعديل القيم مباشرة (مثل الألوان، الهوامش).
• سيناريوهات الاستخدام:
  • "لماذا هذا الزر غير محاذى؟" -> فحص أنماط CSS.
  • "أريد تجربة ما إذا كان هذا العنوان يبدو أفضل باللون الأحمر" -> عدّل color: red مباشرة في Styles.

3.2 Console (لوحة وحدة التحكم)

الوظيفة: عرض رسائل السجل، وتنفيذ كود JavaScript.

• مخرجات السجل: رسائل console.log()، والتحذيرات (صفراء) والأخطاء (حمراء) أثناء تشغيل الصفحة تظهر هنا.
• بيئة تفاعلية: يمكنك كتابة أي كود JS هنا وتنفيذه فوراً. مثلاً كتابة alert('Hello') ستظهر تنبيهاً، وكتابة document.body.style.background = 'red' ستغير الخلفية للأحمر.
• سيناريوهات الاستخدام:
  • "لماذا لا يحدث شيء عند النقر على الزر؟" -> تحقق من وجود رسائل خطأ حمراء.
  • "التحقق من قيمة إرجاع دالة JS." -> شغّلها مباشرة في وحدة التحكم.

3.3 Network (لوحة الشبكة)

الوظيفة: مراقبة جميع طلبات الشبكة.

• عرض القائمة: تعرض جميع الموارد المحملة (HTML, CSS, JS, صور، طلبات API).
• تفاصيل تفاعلية: انقر على أي سطر طلب، ستظهر لوحة تفاصيل على اليمين:
  • Headers (الترويسات): عرض ترويسات الطلب والاستجابة (مثل Content-Type).
  • Response (الاستجابة): عرض البيانات الخام التي أعادها الخادم (JSON, كود HTML, إلخ).
  • Preview (معاينة): معاينة محتوى الاستجابة بصيغة أسهل للقراءة.
• المؤشرات الرئيسية:
  • Status: رمز الحالة (200 نجاح، 404 غير موجود، 500 خطأ خادم).
  • Type: نوع المورد (fetch/xhr يعني طلب API).
  • Time: مدة التحميل.
• سيناريوهات الاستخدام:
  • "هل الواجهة معطلة؟" -> تحقق مما إذا كان طلب الواجهة يظهر 500 باللون الأحمر.
  • "لماذا تحميل الصفحة بطيء جداً؟" -> ابحث عن الصورة أو الملف الذي يستغرق أطول وقت في التحميل.

3.4 Sources (لوحة الكود المصدري)

الوظيفة: عرض الكود المصدري، وتصحيح JavaScript.

• التصحيح بنقاط التوقف: انقر على رقم السطر لوضع "نقطة توقف (Breakpoint)". عند وصول الكود لهذا السطر سيتوقف مؤقتاً، مما يتيح لك رؤية القيم الحالية للمتغيرات وتنفيذ الكود خطوة بخطوة.
• سيناريوهات الاستخدام:
  • "أين الخطأ في منطق الكود؟" -> ضع نقطة توقف، شاهد الكود يتنفذ سطراً بسطر، وتحقق من قيم المتغيرات是否符合 التوقع.

3.5 Application (لوحة التطبيق)

الوظيفة: عرض وإدارة تخزين المتصفح.

• Storage:
  • Local Storage: بيانات التخزين المستمر.
  • Session Storage: تخزين على مستوى الجلسة (يُحذف عند إغلاق التبويب).
  • Cookies: بيانات نصية صغيرة تستخدم للمصادقة، إلخ.
• سيناريوهات الاستخدام:
  • "مسح حالة تسجيل الدخول" -> حذف Cookies أو الرمز في Local Storage.
  • "عرض البيانات المخزنة مؤقتاً" -> فحص ما هو مخزن في Local Storage.

---

4. نصائح عملية

1. تصحيح في وضع الهاتف: انقر على "أيقونة الهاتف" 📱 في الزاوية العلوية اليسرى من DevTools لمحاكاة أحجام شاشات مختلف طرازات الهواتف (iPhone, Pixel, إلخ)، واختبار استجابة الصفحة.
2. فرض الحالات: في لوحة Elements، انقر بزر الأيمن على عنصر، اختر Force state -> :hover، لإبقاء العنصر في حالة التحويم قسراً، مما يسهل تصحيح أنماط التحويم.
3. لقطة شاشة لعقدة: حدد عقدة في لوحة Elements، اضغط Ctrl + Shift + P (Mac: Cmd + Shift + P) لفتح قائمة الأوامر، اكتب screenshot، اختر Capture node screenshot، ويمكنك حفظ لقطة شاشة لعقدة DOM تلك كصورة.

⚠️ ملاحظة

جميع التعديلات في DevTools (تعديل HTML, CSS, JS) مؤقتة، وتسري فقط على الصفحة الحالية في المتصفح. بمجرد تحديث الصفحة، ستُفقد جميع التعديلات. لجعلها دائمة، يجب تعديل ملفات الكود المصدري الخاصة بك.