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

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

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

  • 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

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

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

#

كيف تكشف عن تقنيات مواقع الويب؟

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله – صلى الله عليه و سلم – و آله و صحبه أجمعين .

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

أولا / الإضافات :

 

Wappalyzer

wappalyzer
إضافة لمتصفح فايرفوكس Firefox تظهر لك في شريط العنوان أعلى الصفحة أيقونات للغات البرمجة ، أنظمة إدارة المحتوى (CMS) خوادم الويب (Web Servers) ، مكتبات الجافاسكريبت المشهورة والكثير من التقنيات المستخدمة الموقع المفتوح في متصفحك.
الجدير بالذكر أن الإضافة متوفرة أيضاً بإصدارة تجريبية (Beta) لمتصفح قوقل كروم ولكنها أقل كفاءة من تلك الموجودة في فايرفوكس.
من خلال التجربة وجدت نسبة خطأ لا بأس بها في هذه الإضافة من حيث تحليل التقنيات المستخدمة.


 

Chrome Sniffer


 

إضافة لقوقل كروم ، شبيهه لإضافة Wappalyzer ولكنها تكشف معلومات أقل (فلا تكشف لك على سبيل لغة البرمجة ولا نوع السيرفر المستخدم) ولكنها تفي بالغرض! لم أواجه أخطاء واضحة في هذه الإضافة من حيث تحليل التقنيات المستخدمة.


ثانياً / المواقع :

  

Underthesite


 

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


 

Builtwith


 

بنفس إمكانيات Underthesite .الجدير بالذكر هنا أن هناك إضافة للفايرفوكس و للقوقل كروم لهذا الموقع.
يعاني من نفس مشكلة underthesite من تحليل خاطئ أحياناً.

ختاما نتمنى أن تكونوا قد أفدتم من هذه النظرة السريعة. دمتم بود.

 

 

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