تحقيق أكبر استفادة من أدوات المطورين في المتصفح أثناء تصميم المواقع
السلام عليكم ورحمة الله وبركاته،
سنلقي اليوم نظرة سريعة لأهم أدوات المطورين المرفقة مع متصفحي Chrome و Firefox، وينطبق هذا الشرح على أغلب المتصفحات التي تستخدم Webkit أو Gecko.
يمكنك فتحها في كروم وفايرفوكس بالضغط على F12 أو Ctrl+Shift+I
- أولا: Inspect elements.
هذه الخاصية تُظهر لك عناصر HTML في قائمة بحيث يمكنك توسيع العنصر الأب لرؤية العناصر الأبناء، وبمجرد الضغط على أي عنصر، ستظهر لك جميع خصائص CSS المطبقة على ذلك العنصر سواء كانت inline-style أو في ملف css منفصل، أو بداخل <style> إضافة إلى الخصائص الموروثة عن العناصر ذات المستوى الأعلى، ومن أهم ما يميز هذه الخاصية إمكانية تعديل وإضافة وحذف أي عنصر من عناصر HTML أو أي خاصية CSS مطبقة على ذلك العنصر بحيث تظهر التعديلات مباشرة على المتصفح وتختفي بمجرد تحديث الصفحة، وتفيد هذه الخاصية بشكل كبير أثناء التصميم، فبإمكانك تجربة عدة أشكال أو أنماط للعنصر دون الحاجة لتعديل الكود الأصلي أو تحديث الصفحة كلما عدلت شيئا، وبمجرد وصولك للشكل الذي تريد كل ما عليك فعله هو نسخ الخصائص التي أضفتها ولصقها في مشروعك.
ويمكنك بالضغط على زر computed (الموجود فوق خصائص css في المتصفحين) مشاهدة مقياس العوامل المؤثرة في حجم العنصر (margin/padding/border/size) بشكل منظم كما في الصورة:
ولتسهيل الأمر وتخفيف العناء في البحث عن عنصر HTML الذي تريد اختياره وفرت لك أدوات المطورين هذه الأداة : 
وبمجرد الضغط عليها يمكنك اختيار العنصر من الصفحة مباشرة دون الحاجة للبحث في كود HTML.
- ثانيا: اختبار توافقية التصميم مع مختلف أحجام الشاشات.
يمكنك الوصول إلى هذه الخاصية بالضغط على ctrl+shift+m في المتصفحين أو من خلال الضغط على الأيقونة التي على شكل هاتف محمول.
ولعمل تصميم متجاوب مع جميع الأجهزة بسرعة وسهولة يمكنك استخدام أطر عمل جاهزة، تعرف على أفضل أطر العمل :
- ثالثا: Console.
هي أداة مفيدة لمبرمجي جافاسكربت، حيث أنها مساحة تُظهر الأخطاء البرمجية في جافاسكربت، أو بعض المعلومات المهمة التي يتم طباعتها باستخدام جافاسكربت، إضافة إلى إمكانية كتابة أكواد جافاسكربت وتنفيذها مباشرة على الصفحة (في الــ console الخاص بفايرفوكس توجد خصائص أكثر حيث يمكنك فلترة النتائج لعرض نتيجة أي XHR request أو عرض المشاكل الموجودة في css)
مقدمة في جافاسكربت :
- رابعا: Networking.
هذه الأداة من أهم الأدوات أثناء اختبار الموقع حيث ستظهر لك جميع الاتصالات التي تقوم بها الصفحة، فالصفحة تتصل بعدد من ملفات CSS و JS إضافة إلى طلبات XHR ، ويمكنك عرض وفلترة جميع هذه الطلبات فيمكنك إظهار Requests Headers و Response Headers إضافة إلى معرفة السرعة التي تم بها معالجة الطلب مما سيمكنك من معرفة الملفات أو الطلبات التي تأخذ وقتا أطول ومحاولة معالجة الأمر.
هنا شرح لأدوات Networking في متصفح كروم:
وهذه هي أدوات Networking في فايرفوكس:
نلاحظ وجود خاصية باسم Throttling في كروم، هذه الخاصية مفيدة جدا، من خلالها بإمكانك اختيار سرعة اتصال الإنترنت لديك، تفيد هذه الخاصية في محاكاة عمل الموقع لدى أصحاب الاتصال الضعيف، إضافة إلى إمكانية اختبار الأمور التي تتم بشكل سريع عندك، مثل عرض كلمة Loading مثلا أو شيء متحرك يدل على تحميل مكونات الصفحة، غالبا ستتم بشكل سريع جدا لديك ولن تلاحظها ولن تعلم إذا كانت تعمل بشكل جيد لأنك تشغل الموقع بشكل محلي فسيكون تحميل الصفحات سريعا جدا، فتساعد هذه الخاصية على اختبار هذه الأمور التي قد لا تلاحظها بالعادة إلا بعد رفع الموقع إلى السيرفر.
نلاحظ أن الخاصية غير موجودة في قسم Networking في فايرفوكس، لكنهم أدرجوها ضمن أداة اختبار التوافقية مع أحجام الشاشات كما في الصورة :
بالطبع هذا ليس شرحا كاملا لأدوات المطورين في المتصفحات، لكنني أحببت أن ألقي الضوء على أهم الأدوات المستخدمة بكثرة، يمكنك الاطلاع أكثر على الأدوات الخاصة بكروم من هذه الروابط:
https://developer.chrome.com/devtools
https://developers.google.com/web/tools/chrome-devtools/
وهنا مراجع لأدوات المطورين في فايرفوكس:
https://developer.mozilla.org/son/docs/Tools
https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
التعليقات (0)
عرض المزيد.. جديد مقالاتي
عرض المزيد.. جديد دوراتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !