cover_tut_developerstools2

في الكاتب: و مدرجة تحت التنصيف دروس.

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم-

عند تصميم وتطوير أي موقع أو تطبيق ويب..دائما ما يحتاج المصمم أو المطوّر إلى متابعة طريقة ظهور الموقع أو التطبيق واستجابته للمستخدم. هناك أدوات عديدة تعمل داخل المتصفحات لتحليل ومساعدة المطور ليضمن أفضل أداء ومظهر للموقع ، تختلف الادوات من متصفح إلى آخر ولكنها تشترك في عديد من الخصائص ، من هذه الأدوات :

  • Firebug و يعمل في Firefox
  • DragonFly يعمل في متصفح Opera
    تحديث في 17.7.2013 : Opera الآن يعمل بمحرك Blink (مبني على Webkit) أي أنه صار مثل الكروم 28+ ويتوقف العمل بالـ DragonFly في الإصدارة الحالية Opera 15 مع احتمال عودته مجدداً في الإصدارات القادمة.
  • Developer Tools ويعمل في IE8 فما فوق.
  • وأخيراً Webkit Dev Tools يعمل في Google Chrome و Apple Safari .. و Opera 15+

على الرغن من أنه تم عمل إصدارة Firebug خصيصاً لـ Google Chrome ، إلا أنها ليست بنفس فعالية الإصدارة الأصلية في Firefox .

المتصفحّات وأدوات التطوير

حديثنا في هذه السلسلة سيكون حول أدوات تطوير في قوقل كروم Chrome Developer Tools وكيفية استخدامها لمساعدة المصمم والمطور في تسهيل وتسريع وتصميم تطوير مواقع الويب، ربما نتطرق إلى بقية الأدوات لباقي المتصفحات في وقت لاحق.

واجهة أدوات التطوير

بداية نستخدم F12 أو Ctrl+Shift+i لإظهار أدوات التطوير، تتكون الواجهة من ألسنة Tabs تحتوي أيقونات الوصول للأدوات المختلفة وهي :

1. Elements : غالب العمل سيكون في هذا الجزء الذي يقوم بإظهار عناصر الصفحة في الجهة اليسرى من الشاشة وتفاصيل كل عنصر في الجهة اليمنى.

1-elements

 

2. Resources : وتحتوي هذه النافذة على جميع محتويات الصفحة ، مثل frames والصور وملفات الجافاسكربت والخطوط وملفات الستايل والـ Cookies في الجهة اليسرى وتفاصيل كل جزء في الجهة اليمنى.

2-resources

 

3. Network : تقوم هذه النافذه بإظهار الطلبات Requests الخارجة من هذه الصفحة وتفاصيل كل طلب.3-network

 

 

4. Sources : من هذه النافذة يمكن عرض وتحرير ملفات CSS و JavaScript مباشرة في المتصفح، كما يمكن متابعة وفحص وتحليل عمل الـ JavaScript في الصفحة .

4-source

5. و 6. Timeline, Profiles : كما في نافذة Network ، تعطيك هذه النوافذ معلومات دقيقة حول الأشياء التي تحدث في الصفحة مثلا من سرعة التحميل ، تفاصيل تنفيذ دوال جافاسكربت، حركة مؤشر الماوس، تقريباً جميع الأحداث Events التي تحدث في الصفحة يتم تسجيلها بصورة متسلسة ومتزامنة ، لا أذكر أني استخدمت هذه النوافذ من قبل! ولكن سنتحدّث عنها في وقت لاحق إن شاء الله.

 

7. Audits : تقوم هذه الأداة بتحليل صفحتك من ناحية استخدام الـ CSS والـ Cookies و تفاصيل عن الـ Caching وتقوم إعطاءك معلومات ونصائح حول ما يجب عليك عمله لتحسين أداء الصفحة.

5-audit

 

 

8. Console : يمكن تصنيفه كـ Command Line Tool للمتصفح ، يمكن من خلاله التفاعل مباشرة مع الصفحة من خلال الجافاسكربت .

مثال :

إذا قمنا بكتابة document.title فسيعرض عنوان الصفحة الحالية.

مثال آخر

  window.scrollTo(0,900)

سيقوم بعمل  scroll على بعد 900 بكسل من أعلى الصفحة

الصورة التالية فيها بعض الأمثلة :

6-console

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

وصلى الله وسلم وبارك على سيدنا محمد والحمد لله رب العالمين.

#

wdalhaj

مصمم و مطور ويب حر..يعشق شرب القهوة السوداء.. يمكنكم متابعته على التويتر [email protected]

More Posts

2 Responses to “أدوات المطوّر في قوقل كروم – Developer Tools ؟ (الجزء 1)”

    • wdalhaj

      بارك الله في وجزاك إن شاء الله، نسعد باستفادتكم.

أضف تعليقاً

  • (لن يتم نشره)