موضوعنا اليوم يتناول إظافة للفايرفوكس رأينا أنها تستحق الشرح
نظرا لما تقدمه من نفع و فائدة خاصة لمطوري الواب
حتى أن البعض يظن أنها اقوى من الفايرفوكس ذاته
!!
الإظافة هي
هذا ال addon يمكنك من الإطلاع على كود الصفحة التي أمامك وتعديلها على عين المكان كما يستطيع أن يظهر لك ال requetes الحالية إلى جانب مهام أخرى سنأخذها بالشرح
أول شيء نظغط على هذه الأيقونة للبدأ باستعمال الإظافة
تجدها في ال status bar أسفل واجهة الفايرفوكس
HTML
ستفتح واجهة كهذه أول مرة و هي عبارة عن كود htmlالصفحة الحالية
تلاحظ أن تقديم الكود بالألوان أي أنه واضح
كما تستطيع تعديل كل شيء تقريبا و ترى النتيجة مباشرة على الصفحة
إظافة إلى ذلك فإنه عند مرور المؤشر على كود IMG أي كود صورة فإنها تظهر محاذية للكود مما يسهل الفهم و التتبع أكثر
إذن لنرى ماذا نستطيع أن نفعل بهذا الكود من ناحية التعديل
طبعا كل هذا في Tab ال HTML
console
لنرى ال console التي تحدثنا عنها
في الحقيقة هذا الجزء المفضل شخصيا فهي تسمح برؤية جميع الأخطاء كما تسمح أيضا بتنفيذ جميع أوامر javascript و تنفيذ الأوامر مباشرة على أي عنصر بالصفحة و تعديله كما تشاء برمجيا
و هنا نرى مثالا
كما ترون النتيجة تعرض حالا
الconsole تصلح أيضا للإطلاع على الأخطاء و المعلومات الصادرة عن السكريبتات javascript التي يقوم المتصفح بتنفيذها لحظة بلحظة
مثلا Done أستعملتها لأتثبت إن كان السكريبت يصل إلى ما أريد أم لا و باقي الرسائل message/info هي لهذه الصفحة
لأستعمال ال console إستعمل في السكريبت الخاص بك:
كود:
console.log(your_message)
كود:
console.info(information)
كود:
console.warn(your_warning)
كود:
console.error(your_error)
و هكذا تستطيع تتبع ما يحدث مع السكريبت خطوة بخطوة
عندما تلاحظ أن هناك خطأ ما تستطيع أن تجعل المتصفح يتوقف عنده breakpoint في المرة القادمة التي تحدث فيها الصفحة (refresh) و هكذا تستطيع التثبت من الأمر بروية
ملاحظة : إذا كنت كتبت أوامر في ال console و غيرت ال tab سيمحى ما كتبته كليا لكن لا تقلق ctrl+z ستعيده
CSS
في هذا ال tab سترى كل ال classes و تستطيع التعديل عليها بحرية تامة و ترى الأثر مباشرة على الصفحة
NET
هنا تستطيع أن تطلع على جميع ال requests الصادرة من المتصفح على المباشر و تشاهد خاصياتها أي ال header و الإجابة response
في النافذة فوق تطلع على ال args الخاصة بالpost request
أي أن كل شيء سيكون أمامك تماما و ستحظى بمتابعة أصغر التفاصيل
SCRIPT
هنا تستطيع التعامل مع السكريبتات الموجودة في الصفحة
كما تستطيع أن تضيف breakpoint عند أي مستوى فيتوقف المتصفح (تنفيذ السكريبت) عنده و هذه مفيدة للdebuggage
كما تستطيع إظافة شرط للتوقف(الزر الأيمن للماوس)
الشرط يكون من قبييل variable == 1 أو variable! إلى ما هناك
في نفس الtab على اليمين تجد ال watch و هي لمراقبة المتغيرات variables
في المثال أردنا أن نطلع على ال date الآن كما نستطيع الإطلاع على أي variable موجودة في السكريبت الجارى تنفيذه
كما نجد ال stack
و تظهر فيه ال functions التي توقف تنفيذها عند الوصول إلى ال breakpoint الحالية
و شيء آخر
كما توجد إظافات للفايرفوكس فإنه توجد إظافات لهذه الإظافة
!!
مثلا FireFinder و تسمح لك بالبحث عما يوافق xpath معين مثلا او css style
 | انقر على هذا شريط لعرض الصورة الكاملة. الحجم الاصلي للصورة هو 812x167 |
DOM
هذا الجزء تجد فيه كل شيء بدأ بالمتغيرات variable إلى الدالات functions إلى العناصر html و حتى مكونات محرك الفايرفوكس ال gecko كما يظهر أسفل الصورة
يعنى كل ما يحدث سيكون أمامك
مع تحيات ابو سياف
0 التعليقات:
إرسال تعليق