تحقيق أكبر استفادة من أدوات المطورين في المتصفح أثناء تصميم المواقع

عمار الخوالدةمنذ 3 سنوات

السلام عليكم ورحمة الله وبركاته،

سنلقي اليوم نظرة سريعة لأهم أدوات المطورين المرفقة مع متصفحي Chrome و Firefox،  وينطبق هذا الشرح على أغلب المتصفحات التي تستخدم Webkit أو Gecko.

يمكنك فتحها في كروم وفايرفوكس بالضغط على F12 أو Ctrl+Shift+I

  • أولا: Inspect elements.

هذه الخاصية تُظهر لك عناصر HTML في قائمة بحيث يمكنك توسيع العنصر الأب لرؤية العناصر الأبناء، وبمجرد الضغط على أي عنصر، ستظهر لك جميع خصائص CSS المطبقة على ذلك العنصر سواء كانت inline-style أو في ملف css منفصل، أو بداخل <style> إضافة إلى الخصائص الموروثة عن العناصر ذات المستوى الأعلى، ومن أهم ما يميز هذه الخاصية إمكانية تعديل وإضافة وحذف أي عنصر من عناصر HTML أو أي خاصية CSS مطبقة على ذلك العنصر بحيث تظهر التعديلات مباشرة على المتصفح وتختفي بمجرد تحديث الصفحة، وتفيد هذه الخاصية بشكل كبير أثناء التصميم، فبإمكانك تجربة عدة أشكال أو أنماط للعنصر دون الحاجة لتعديل الكود الأصلي أو تحديث الصفحة كلما عدلت شيئا، وبمجرد وصولك للشكل الذي تريد كل ما عليك فعله هو نسخ الخصائص التي أضفتها ولصقها في مشروعك.

 

first.thumb.png.be387fd05c6bc2ec553fde642a48bf9b.png

 

ويمكنك بالضغط على زر computed (الموجود فوق خصائص css في المتصفحين) مشاهدة مقياس العوامل المؤثرة في حجم العنصر (margin/padding/border/size) بشكل منظم كما في الصورة:

 

Screenshot_20171020_101643.png.a1e55a37b1fc1f0b4942ec5b5fed813c.png

 

ولتسهيل الأمر وتخفيف العناء في البحث عن عنصر HTML الذي تريد اختياره وفرت لك أدوات المطورين هذه الأداة : Screenshot_20171020_100720.png.ed9c7a9c6c2bf88b2a5ec93ecd87339a.png وبمجرد الضغط عليها يمكنك اختيار العنصر من الصفحة مباشرة دون الحاجة للبحث في كود HTML.

Screenshot_20171020_100934.png.a82b3122e6a10616aa52c1bc45edfacc.png

 

  • ثانيا: اختبار توافقية التصميم مع مختلف أحجام الشاشات.

يمكنك الوصول إلى هذه الخاصية بالضغط على ctrl+shift+m في المتصفحين أو من خلال الضغط على الأيقونة التي على شكل هاتف محمول.

 

second.thumb.png.abe45e34bd989daf5f45ef6c943526fc.png

 

ولعمل تصميم متجاوب مع جميع الأجهزة بسرعة وسهولة يمكنك استخدام أطر عمل جاهزة، تعرف على أفضل أطر العمل :

https://3alam.pro/articles/html-css/frontend-frameworks/

 

  • ثالثا: Console.

هي أداة مفيدة لمبرمجي جافاسكربت، حيث أنها مساحة تُظهر الأخطاء البرمجية في جافاسكربت، أو بعض المعلومات المهمة التي يتم طباعتها باستخدام جافاسكربت، إضافة إلى إمكانية كتابة أكواد جافاسكربت وتنفيذها مباشرة على الصفحة  (في الــ console الخاص بفايرفوكس توجد خصائص أكثر حيث يمكنك فلترة النتائج لعرض نتيجة أي XHR request أو عرض المشاكل الموجودة في css)

 

Screenshot_20171020_104355.png.5a92e9f0011d9ee3c1041a9e6d5c38b9.png

 

مقدمة في جافاسكربت :

https://3alam.pro/articles/javascript/javascript-introduction-syntax/

 

  • رابعا: Networking.

هذه الأداة من أهم الأدوات أثناء اختبار الموقع حيث ستظهر لك جميع الاتصالات التي تقوم بها الصفحة، فالصفحة تتصل بعدد من ملفات CSS و JS إضافة إلى طلبات XHR ، ويمكنك عرض وفلترة جميع هذه الطلبات فيمكنك إظهار Requests Headers و Response Headers إضافة إلى معرفة السرعة التي تم بها معالجة الطلب مما سيمكنك من معرفة الملفات أو الطلبات التي تأخذ وقتا أطول ومحاولة معالجة الأمر.

هنا شرح لأدوات Networking في متصفح كروم:

networkingChrome.png.f69bd9dd4fd889824ecf98afe40160bf.png

 

وهذه هي أدوات Networking في فايرفوكس: 

 

firefox.thumb.png.ce3abf53658ad8892272ebe646efccb9.png

 

نلاحظ وجود خاصية باسم Throttling في كروم، هذه الخاصية مفيدة جدا، من خلالها بإمكانك اختيار سرعة اتصال الإنترنت لديك، تفيد هذه الخاصية في محاكاة عمل الموقع لدى أصحاب الاتصال الضعيف، إضافة إلى إمكانية اختبار الأمور التي تتم بشكل سريع عندك، مثل عرض كلمة Loading مثلا أو شيء متحرك يدل على تحميل مكونات الصفحة، غالبا ستتم بشكل سريع جدا لديك ولن تلاحظها ولن تعلم إذا كانت تعمل بشكل جيد لأنك تشغل الموقع بشكل محلي فسيكون تحميل الصفحات سريعا جدا، فتساعد هذه الخاصية على اختبار هذه الأمور التي قد لا تلاحظها بالعادة إلا بعد رفع الموقع إلى السيرفر.

 

نلاحظ أن الخاصية غير موجودة في قسم Networking في فايرفوكس، لكنهم أدرجوها ضمن أداة اختبار التوافقية مع أحجام الشاشات كما في الصورة :

 

Screenshot_20171021_163520.png.76d40c63c1bd1061254e610911ade893.png

 

بالطبع هذا ليس شرحا كاملا لأدوات المطورين في المتصفحات، لكنني أحببت أن ألقي الضوء على أهم الأدوات المستخدمة بكثرة، يمكنك الاطلاع أكثر على الأدوات الخاصة بكروم من هذه الروابط:

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

 

كلمات دليلية:
4
إعجاب
3015
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !