كيفية استخدام أدوات المطور في المتصفح

أدوات المطور في المتصفح عبارة عن مجموعة قوية من الأدوات المدمجة تتيح لك فحص وتحليل وتعديل مواقع الويب في الوقت الفعلي. تساعدك هذه الأدوات في تطوير المواقع وإصلاح المشاكل وتحسين الأداء.

1. افتح أدوات المطور. اضغط F12 في معظم المتصفحات أو استخدم Ctrl+Shift+I في ويندوز أو Cmd+Option+I في ماك. يمكنك أيضاً النقر بالزر الأيمن على أي عنصر في الصفحة واختيار "فحص العنصر" أو "Inspect Element". ستظهر لوحة الأدوات في أسفل أو جانب النافذة.
2. استكشف تبويب Elements. يعرض هذا التبويب كود HTML للصفحة بشكل تفاعلي. انقر على أي عنصر لتحديده في الصفحة، أو استخدم أداة التحديد لاختيار عناصر مرئية من الصفحة. يمكنك توسيع وطي العناصر لرؤية البنية الكاملة للصفحة.
3. فحص أنماط CSS. في الجانب الأيمن من تبويب Elements، ستجد لوحة Styles التي تعرض جميع قواعد CSS المطبقة على العنصر المحدد. يمكنك تعديل القيم أو إضافة خصائص جديدة أو إلغاء تفعيل خصائص موجودة بالنقر على مربع الاختيار بجانبها.
4. تحليل أداء الشبكة. انتقل إلى تبويب Network وأعد تحميل الصفحة بـ Ctrl+R. ستظهر جميع طلبات الشبكة مع أوقات التحميل وأحجام الملفات. انقر على أي طلب لرؤية تفاصيل الرؤوس والاستجابة والمحتوى.
5. تصحيح JavaScript. في تبويب Console، يمكنك تنفيذ أكواد JavaScript مباشرة وعرض رسائل الأخطاء والتحذيرات. اكتب أي كود JavaScript واضغط Enter لتنفيذه. للتصحيح المتقدم، انتقل لتبويب Sources لوضع نقاط توقف في الكود.
6. محاكاة الأجهزة المحمولة. انقر على أيقونة الجهاز المحمول في شريط الأدوات أو اضغط Ctrl+Shift+M. اختر نوع الجهاز من القائمة المنسدلة أو اضبط الأبعاد يدوياً. يمكنك أيضاً محاكاة سرعة الشبكة وإعدادات اللمس.
7. حفظ التغييرات والتصدير. لحفظ التغييرات على ملفات CSS، انتقل لتبويب Sources وعدّل الملفات مباشرة ثم احفظها بـ Ctrl+S. يمكنك أيضاً تصدير تقارير الأداء من تبويب Performance أو حفظ لقطات الشاشة من تبويب Elements بالنقر الأيمن على العنصر.