RSS

Firebug و FirePHP

29 أبريل

لا تخلو جعبة أي مبرمج محترف من الأدوات التي تعينه في عمله وتساعده على استثمار أكثر فعالية للوقت والمجهود، حيث يتوزع طيف هذه الأدوات من التصميم إلى التنقيح وكشف الأخطاء وصولا إلى ضبط الجودة وتحسين الأداء وإدارة الشيفرة المصدرية وغيرها الكثير من وجوه الخدمات التي تكمل عمله البرمجي. وفي عصر الإنترنت لم تعد المشكلة هي توفر مثل هذه الأدوات، بل وجود الآلاف منها بحيث بات يصعب فرز الغث من السمين، لذا أتت هذه المقالة لتختصر عليك عديد الساعات من البحث والتجريب، وتعرض لك إحدى أفضل الأدوات المتاحة لعمل مطور مواقع الويب، وهي أداة مجانية ومتوفرة على بعد عنوان URL ونقرة. تدعى هذه الأداة التي نتحدث عنها اليوم Firebug، والتي يمكن الحصول عليها من العنوان: http://getfirebug.com

تندمج أداة Firebug مع مستعرض Firefox لتوفر أداة قيمة لمطوري مواقع الويب عند أطراف أصابعهم، تسمح لهم باستعراض وتعديل وإصلاح أخطاء شيفرات HTML وملفات CSS وبرامج JavaScript مباشرة من خلال استعراضهم لأي صفحة ويب. وتتميز هذه الإضافة بسهولة الاستخدام وسرعة الوصول إلى وظائفها بأقل عدد ممكن من النقرات دون أن تربك عملية الاستعراض وسلاستها، حيث تستطيع فتح  Firebug في نافذة منفصلة أو كجزء ظاهر في أسفل صفحة المستعرض، كما يمنحك القدرة على التحكم بأي المواقع التي تريد لهذه الإضافة أن تفعّل من أجلها وأيها لا.

من مزايا هذه الإضافة أنها تتيح لك تعديل شيفرة  HTML للصفحة المعروضة مباشرة وبطريقة سهلة وبسيطة تمكّن من إيجاد عناصر  HTML المدفونة عميقا ضمن الصفحة، وحالما تجد ما كنت تبحث عنه، تقدم لك إضافة  Firebug معلومات كاملة عن العنصر المختار، كما تتيح لك التعديل على شيفرة  HTML المصدرية ورؤية نتائج التعديل مباشرة.

كذلك هنالك لسان تبويب خاص بصفحات الأنماط المتعاقبة CSS تسرد فيها كافة الأنماط والصفات المطبقة على عنصر  HTML المختار، فإن لم تكن راض عما هو واقع ومطبق على ذلك العنصر، فباستطاعتك تغييره والتعديل على نمط  CSS المستخدم بسهولة لترى ناتج ذلك التعديل ينعكس آنيا على الصفحة التي تستعرضها حاليا.

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

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

أما بالنسبة لشيفرات  JavaScript البرمجية، فتتيح لك هذه الإضافة إيقاف تنفيذ البرنامج بشكل مؤقت في أية لحظة تشاء، واستعراض حالة كافة المتحولات أو التعابير في تلك اللحظة بالذات. كما باستطاعتك قياس أداء البرنامج الذي تستخدمه وتتبين بسرعة مواضع عنق الزجاجة التي تتسبب في بطئ البرنامج ككل.

إن هذه الإضافة القيمة تتيح لك أيضا التعرف فورا على مواضع الأخطاء إن وجدت، وتوفر لك معلومات وتفاصيل مفيدة حول هذه الأخطاء سواء كانت في برامج  JavaScript أو صفحات الأنماط المتعاقبة  CSS أو حتى صيغ وشيفرات XML والذي تعد شيفرات xhtml نوعا منها.

عدى عن ذلك تمتاز إضافة  Firebug بإمكانية استعراض محتوى الصفحة بهرمية نموذج كائن الصفحة أو مايدعى DOM، حيث تسرد كافة كائنات ووظائف الصفحة ضمن تلك الهيكلية الهرمية بذات الأسلوب الذي تراه بها شيفرات  JavaScript مما يساعد على سرعة العثور على أي من تلك الكائنات، إضافة إلى إمكانية التعديل عليهم مباشرة لترى النتائج في الصفحة المعروضة حاليا ضمن نافذة المستعرض.

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

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

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

<?php
    FB::log('Log message');
    FB::info('Info message');
    FB::warn('Warn message');
    FB::error('Error message');
?>

يتم استخدام هذه الإضافة بالتعاون مع إضافة  Firebug لمستعرض Firefox التي سبق الإشارة لها في بداية هذه المقالة. يومكنك تحميلها من العنوان: http://www.firephp.org

لاستخدام هذه الأداة عليك بداية تحميل مكتبة FirePHPCore من العنوان التالي:

http://www.firephp.org/HQ/Install.htm

ومن ثم نقلها إلى مجلد الويب الخاص بالموقع الذي تعمل عليه (مثلا ضمن مجلد فرعي باسم  FirePHPCore والذي سيتضمن في هذه الحالة ثلاثة ملفات هي fb.php و FirePHP.class.php إضافة إلى ملف الترخيص الحر المفتوح المصدر)، بعد ذلك عليك تضمين هذه المكتبة في البرنامج الذي تعمل عليه كما يلي:

<?php
    require_once('FirePHPCore/fb.php');
?>

ومن ثم عليك منع المخدم من إرسال أي خرج HTML قبل اكتمال معالجة الصفحة الحالية وذلك لأن معلومات  FirePHP يجب أن ترسل في ترويسة  HTML قبل أن يتم إرسال محتوى الصفحة ذاتها، ويتم ذلك من خلال استخدام التعليمة

<?php
     ob_start();
?>

في بداية البرنامج، أو من خلال تفعيل ميزة output_buffering ضمن ملف php.ini بوضع القيمة true له. ها قد أصبحت الآن جاهزا لاستخدام هذه المكتبة في برنامجك، يوضح المثال التالي آلية مثل هذا الاستخدام:

<?php
    $var = array('i' => 10, 'j' => 20);
    fb($var, 'Iterators');
?>

بعد ذلك يمكنك الولوج إلى هذه الصفحة باستخدام مستعرض  Firefox المزود بكل من الإضافتين  Firebug و  FirePHP (لا تنس أن تقوم بتفعيل كل من ميزتي Firebug Net و Firebug Console لديك)

لاحظ أن كل من اسم الملف ورقم السطر سيظهران فقط عند وضع مؤشر الفأرة فوق الرسالة كم هو موضح في الشكل التالي:

كما أن مرور المؤشر على أي مصفوفة سيؤدي إلى ظهور عارض المتحولات كما هو موضح في الشكل التالي:

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

<?php
    require_once('FirePHPCore/FirePHP.class.php');

    $firephp = FirePHP::getInstance(true);

    $firephp->log('Plain Message');   // or FB::
    $firephp->info('Info Message');   // or FB::
    $firephp->warn('Warn Message');   // or FB::
    $firephp->error('Error Message'); // or FB::
?>

كما يمكنك ضبط هذه الواجهة الغرضية التوجه بحيث تقوم بتحويل كل رسائل الاستثناءات مباشرة إلى  Firebug كما هو موضح في المثال التالي:

<?php
    $firephp->registerErrorHandler();
    $firephp->registerExceptionHandler();

    try {
        throw new Exception('Test Exception');
    } catch(Exception $e) {
        $firephp->error($e);  // or FB::
    }
?>

كما يمكنك إجراء عملية تتبع تظهر لك معلومات حول اسم الملف ورقم السطر والصنف والطريقة أو التابع الذي تم استدعاؤه بما في ذلك مجموعة الوسطاء التي تم تمريرها إليه لتظهر لك وبوضوح مسار التنفيذ المتبع وصولا إلى النقطة التي تم فيها قدح عملية التتبع هذه:

<?php
    $firephp->trace('Trace Label'); // or FB::
    fb('Trace Label', FirePHP::TRACE);
?>

في الختام أرجو أن أكون قد قدمت لك قارئي العزيز معلومة جديدة أثارت اهتمامك، واتمنى أن تتحول هذه المعلومة في نهاية المطاف إلى عادة يومية مفيدة تساعد في تحسين جودة وسرعة عملك.

 
3 تعليقات

Posted by في 29 أبريل 2010 in PHP, تقنيات الويب

 

الأوسمة: ,

3 responses to “Firebug و FirePHP

  1. PHP0

    29 أبريل 2010 at 1:58 مساءً

    بالتأكيد إن هذه الأدوات رائعة وتكملة لأدوات البرمجة الرائعة
    أشكرك على التوضيح

     
  2. Ahmed M. Araby

    29 أبريل 2010 at 5:52 مساءً

    firebug تقريبا اول اداة اقوم بتثبيتها بعد تثبيت التوزيعة مباشرة
    firephp لا استخدمه لكن ما اسمعه انه جيد عن استخدام الاجاكس وهكذا لكني شخصيا لم اجربة

     
  3. عبدالمجيد الحربي

    31 يوليو 2010 at 4:31 صباحًا

    أداااااة مميزة ..

    سأقووم بنتنزيلها على المتصفح ..

    مشكور أستاذنا خالد على هالموضوع ..

     

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

 
%d مدونون معجبون بهذه: