2.3 أدوات المطور (DevTools) في المتصفح

الشرح

أدوات المطور (DevTools) هي مجموعة أدوات مدمجة مجاناً في كل متصفح حديث (Chrome, Edge, Firefox) مصمّمة خصيصاً لمساعدة المبرمجين على فهم واختبار وتصحيح صفحات الويب. تُفتح بضغطة زر واحدة (F12، أو Ctrl+Shift+I)، وتحتوي على عدّة تبويبات، أهمها للمبتدئ تبويب Elements الذي يعرض كود HTML وCSS الفعلي لأي صفحة مفتوحة أمامك، حتى لو كانت لموقع لا تملكه.

الأجمل في هذه الأداة أنها تسمح لك بالتجربة المباشرة: يمكنك النقر على أي عنصر في تبويب Elements وتعديل نصه أو لونه أو حجمه، وسترى التغيير ينعكس فوراً على الصفحة أمامك — لكن هذا التعديل مؤقت تماماً ويختفي فور تحديث الصفحة (F5)، لأنك تُعدّل فقط النسخة المحمّلة في ذاكرة متصفحك، وليس الملفات الحقيقية على خادم الموقع. هذا يجعلها بيئة تجريب آمنة 100%: يمكنك "كسر" أي موقع في العالم بصرياً أمام عينيك فقط، بلا أي خطر حقيقي على الموقع نفسه أو حسابك.

💡 نقطة مهمة: تبويب Console (بجانب Elements) هو المكان الذي ستشاهد فيه لاحقاً أي أخطاء JavaScript في صفحتك — تعوّد على فتحه كل مرة تشك فيها أن شيئاً لا يعمل كما يجب.

🎯 تمرين عملي

افتح أي موقع، اضغط F12، وحاول من تبويب Elements تغيير نص أحد العناوين في الصفحة (التغيير مؤقت ويختفي عند تحديث الصفحة).

📚 لمزيد من التوسّع

فهرس دروس MDN الأساسية

✅ نموذج حل مقترح

عند النقر على نص العنوان في تبويب Elements، انقر مرة أخرى على النص نفسه (double-click) ليصبح قابلاً للتعديل مباشرة، اكتب أي نص جديد، ثم اضغط خارج المربع لتأكيد التغيير. سترى التعديل ينعكس فوراً على الصفحة أمامك، لكنه يختفي تماماً بمجرد الضغط F5 — لأنك عدّلت فقط النسخة المؤقتة المحمّلة في الذاكرة.