آشنايي با فايرباگ:

فایرباگ (Firebug) ابزاری پرکاربرد و قدرتمند با ابعاد وسيعي از امکانات برای طراحان و توسعه دهنده های وب است.

راهنما و آموزش استفاده از فاير باگ (Firebug):

فايرباگ (Firebug) يک برنامه کد باز (Open source) است و به عنوان ابزاری کمکي براي توسعه وب استفاده مي شود که مخصوص مرورگر موزيلا فايرفاکس (Mozilla Firefox) مي باشد می توانید این برنامه را با یک جستجوی ساده در قسمت add-ons این مرورگر پیدا کرده و نصب کنید.

فايرباگ براي سرعت بخشيدن به روند برنامه نویسی سمت کلاینت (نظیر HTML, CSS, Javascript و...)، هنگام خطایابی (debug) صفحات وب بسیار موثر است.

از جمله کاربردهای دیگر این برنامه قابلیت نمایش کدهای صفحات وب است با وجود چنین خاصیتی طراحان به راحتی می توانند الگوها و طرح های مختلف را در صفحات مختلف ببینند و با کمی ویرایش برای طرح خود به کار ببرند.
بيایيد نگاه دقيق تري به اين ابزار مهم و ضروري مرورگر فاير فاکس بيندازيم تا متوجه شويم که اين ابزار چگونه به شما کمک خواهد کرد. ما فقط روي ويژگي هايي که به طراح وب کمک مي کند تمرکز خواهيم کرد.
راه هاي مختلفي براي باز کردن پنل فايرباگ وجود دارد وقتي که اين پنل را باز مي کنيم بايد محیطی مشابه تصوير زير داشته باشد.
 
باز کردن فاير باگ:

• با فشردن دکمه F12 از صفحه کليد مي توانيد پنل فاير باگ را خاموش و روشن کنيد.
• روی صفحه، کلید سمت راست ماوس را بزنید (Right-click) و در منوی باز شده گزینه ی Inspect Element with Firebug را انتخاب کنید.
• معمولا با نصب فایرباگ آیکن آن در نوار ابزار مرورگر ظاهر می شود با کلیک روی این آیکن می توانید ابزار را روشن و از آن استفاده کنید. و اگر در نوار ابزار مرورگر مشاهده نمی کنید می توانید با کلیک روی منوی فایرفاکس قسمت Customize این ابزار را در هر قسمت از مرورگر که میخواهید بکشید (Drag & Drop) و قراردهید. 

استفاده از فايرباگ در يک پنجره جديد:
زماني که پنل فايرباگ شما روشن است شاید بخواهد که آن را به صورت مجزا در پنجره ای جدید مشاهده کنيد. با کلیک روی آیکن Open Firebug in New Window در گوشه سمت راست بالای این ابزار می توانید فایرباگ را در پنجره ی مخصوص خودش مشاهده کنید اين کار براي مانيتورهاي بزرگ و تنظيمات کامپيوترهايي که از چند مانيتور به صورت همزمان استفاده مي کنند می تواند مفيد باشد.

جمع کردن فایرباگ:
با کلیک روی آیکن Minimize Firebug (که در گوشه ی سمت راست بالای این ابزار قرار دارد) شما می توانید این ابزار را جمع کنید با این کار شما این ابزار را نبسته اید بلکه فقط آن را از حالت نمایش خارج کرده اید.

بستن ابزار فایرباگ:
برای این کار کافیست روی آیکن Deactive Firebug for the current website (که در گوشه ی سمت راست بالای این ابزار قرار دارد) کلیک کنید.

پنل های کاربردی:
پنل ها، قسمت های مختلف کاربردی فایرباگ هستند که آنها در بالای فایر باگ لیست شده اند از جمله پنل های فایرباگ Console, HTML, CSS, Script, DOM, NET, Cookies هستند که هر کدام قسمت های خاصی از سند وب سایت شما را نمایش می دهند. به صورت default هنگام باز کردن فایرباگ شما در پنل HTML قرار می گیرید. هر پنل ابزارهای خاص خود را دارد.

بررسي قالب و ساختار صفحه وب و نشانه گذاري ها:

اولين سوالي که شما از خودتان در مورد صفحه اي که در حال توسعه و يا رفع مشکلات آن هستيد، مي پرسيد اين است که: مشکل وب سايت چيست و از کجا به وجود آمده؟
کاربرد اوليه و اساسي فايرباگ بررسي است.

پنل HTML:
این پنل امکان بررسی تگ های HTML را به شما می دهد.
در پنل HTML دو بخش وجود دارد

1. قسمت نمايش تگ ها
   در سمت چپ پنل قسمت نمايش تگ ها قرار دارد، که در واقع کدهاي تشکيل دهنده صفحه اي که در مرورگر شما باز است را نمايش مي دهد.
   نمايش تگ ها به شما اين اجازه را مي دهد که به ويرايش عناصر HTML صفحه بپردازيد و نتيجه آن را همان لحظه در صفحه مشاهده کنيد وقتي که شما ماوس را روي عناصر نشانه گذاري شده HTML ببرید عناصر صفحه وبی که شما در حال بررسي آن هستيد به صورت هاي هايلايت نمايش داده مي شود. اين ابزار به طرز باور نکردني به شما دقيقا نشان مي دهد که مرورو گر به چه صورت به پياده سازي و اجرا کردن عناصر HTML در صفحه مي پردازد و عناصر مشخص در کجاي صفحه قرار دارد. با استفاده از اين ابزار مي توانيد مشکلات مربوط به کدهای HTML, CSS, JavaScript و... را در صفحه بر طرف کنيد.
   وقتي که شما بر روي تگ هاي HTML کليک مي کنيد روي نوار بالاي بخش نمايش تگ ها، مسير هر تگ نمايش داده خواهد شد. از اين مسير براي انتخاب تگ (اشاره به تگ) توسط CSS یا JavaScript می توان استفاده کرد تا تگ خاص مورد نظرمان را ویرایش کنید همچنین می توانید از طریق قسمت سمت راست پنل نیز در کدهای CSS و... دستکاری کنید.
   براي اينکه هر چه سريعتر به عنصر HTML مورد نظر خود دست يابيد مي توانيد از نوار جستجوي سمت راست پنل استفاده کنيد که با هاي لايت توسي در بخش نمايش تگ ها، بخش مورد نظر را نمايش خواهد داد.
2. قسمت کناری پنل HTML:
   بخش بعدي که در سمت راست پنل قرار دارد به نام پنل کناري (Side panel) معروف است. در اين پنل کناري، زیرپنل هايي وجود دارد که به شما اطلاعات بيشتري در مورد عناصر انتخاب يا هاي لايت شده مي دهد.
   زیرپنل های پنل کناری:
   1. استايل style
   2. قالب يا layout
   3. محاسبه computed
   4. مدل شيء سند يا (Document Object Model-DOM)
   5. رخدادها Events

زیرپنل استايل (style) در پنل کناري به شما تاثير CSS-هاي مهم عناصر صفحات وب را نمايش مي دهد. اين پنل نمايي از برگه ی استایل دهی (Style Sheet-صفحه نوشتن کد هاي CSS) با شماره خط آن کدها را نمايش مي دهد. در اين حالت شما بيشتر از يک برگه استایل دهی را یکجا خواهيد دید.

در زیرپنل محاسبات (computed)، شما خصوصيات CSS را مشاهده خواهيد کرد مانند text-align, font-color, font-size و... اين اطلاعات به شما در درک نحوه ارائه اين کدها توسط مرورگر کمک مي کند.

زیرپنل قالب (layout) در پنل کناري، تصويري از باکس مدل هاي يا تقسيم بندي صفحه وب را نمايش ميدهد. اگر شما جزو آن دسته از طراحان وب هستيد که با نگاه کردن مي آموزيد اين پنل بهترين امکان را به شما براي يادگيري هر چه بهتر مي دهد. براي يادگيري margin و padding صفحه و آشنايي با تقسيم بندي صفحه وب از اين ابزار به راحتي مي توانيد استفاده کنيد. با دوبار کليک کردن روي اعداد نمايش داده شده در اين پنل شما مي توانيد آزمايش هاي خود را به صورت واقعي روي يک صفحه وب انجام دهيد.
 
زیرپنل DOM، در واقع مدل شیء سند يک عنصر در صفحه وب را نمايش مي دهد اين بخش بيشتر براي کساني که با جاوا اسکريپت يا اسکريپت هاي کلاينت سايد کار مي کنند مناسب است.

اصلاح HTML اجرا شده:
صد ها راه مديريت اجراي HTML در جريان کاري، از طريق دسترسي به فايل ها روي سرور يا وقتي که با استفاده از سرور لوکال از وب سرور XAMPP يا wamp server استفاده مي کنيد، وجود دارد. من فکر مي کنم که اکثر طراحان وب ترجيح مي دهند که کدها را از طريق اديتور خود اجرا و اديت نمايند زيرا در اين حالت هر تغيير و ويرايش روي کدها در فضاي امن تري انجام مي شود. به هر حال، در زمانيکه که قصد بررسي سريع موردي در مرورگر خود در زماني که به کدهاي HTML صفحه وب دسترسي نداريد يا پشت کامپيوتر خود نيستنيد يا اينکه اصلا کدهاي اين صفحه وب را شما ننوشته ايد فايرباگ بسيار عالي و مفيد عمل ميکند.
در پنل نمايش تگ هاي HTML فايرباگ، مي توانيد با کليک بر روي هر کدام از کدها به بررسی آنها بپردازيد و نتيجه نهائي را روي صفحه وب مشاهده کنيد. البته ابن نتایج پایدار نیستند و با بارگذاری مجدد صفحه تمام تنضیمات به حالت اول بر می گردند پس بهتر است پس از هر تغییر آن تغییر را در فایل های سرور اعمال کنید.

چند تا نکته ديگر در اين رابطه لازم است که اضافه کنم:
افزودن یا ويرايش کردن و حذف کردن تمام عناصر HTML

براي مثال در صورت حذف اين div چه اتفاقي براي floats صفحه خواهد افتاد؟

افزودن یا ويرايش و حذف ID و کلاس

براي مثال در صورت حذف اين کلاس آيا خصوصيات ارائه شده با مشکل مواجه مي شوند؟

قرار داد تکميل کننده هاي بيشتر در عنوان متن ها و روي دکمه ها براي تست Line-break يا شکست خطوط متني.

افزودن استايل هاي inline موقتي براي تست سريع با استفاده از خصوصيات HTML

مثلا آيا اين هايپرلينک hyperlink با اين استايل بهتر مي شود color:#00aeef یا نه.

اصلاح CSS هاي اجرا شده:
اصلاح CSS، محل آخرين اقدام براي طراح وب سایت است، جائي که تغييرات اصلي انجام مي شود. همانطور که گفته شد بررسي عناصر HTML در صفحه وب و ظاهر سلسله مراتبي آن در پنل نمايش تگ ها انجام مي شود. اين استايل ها بر اساس حروف الفبا مرتب سازي شده است و توسط سلکتورها گروه سازي مي شوند.
اين سلکتورها در دستور سي اس اس هاي ارائه شده نمايان مي شود سي اس اس هاي که در برگه استایل دهی آخر نوشته شده اند بالاتر قرار مي گيرند و آنهايي که در برگه استایل دهی در ابتداي صفحه نوشته شده اند در پائين صفحه قرار مي گيرند. به بیان دیگر استایل هایی با اولویت بالا در ابتدا و استایل هایی با اولویت کم در پایین ابزار قرار میگیرند تا خواندن و ویرایش کردن را راحتتر کند.
فايرباگ کدهای CSSی که در صفحه فعال و موثر هستند نمایش و کدهایی که در صفحه هستند ولی تاثیری ندارند را با کشيدن خطی رويشان مشخص مي کند. اگر روي يکي از عناصر خطي کشيده شده باشد اين بدين معني است که قانون ديگري در CSS اوليت بيشتري نسبت به اين قانون بر روي يک عنصر واحد داشته است.

مورد جالبی که در پنل کناري بخش CSS وجود دارد اين است که اين کد ها قابليت اديت شدن را دارند مثلا اگر مي خواهيد ببيند که وب سايت چه تغييري مي کند اگر شما padding-top را تغيير دهید فقط کافي روي عدد کليک کنيد و آن را تغيير بدهيد يا حتي مي توانيد آن خصوصيت را با کلیک روی نامش تغییر دهید.
 
شما حتي مي توانيد خصوصيتي را غيرفعال کنيد تا ببینید در صورت عدم وجود اين قانون صفحه وب شما به چه صورت تغيير ميکند. اين قابليت براي پيدا کردن کدها و خطوط غير قابل استفاده در CSS مفيد مي باشند و به شما در کشف علت استفاده خصوصيات مختلف کمک مي کند.

وقتي شما در حال ویرایش کدهاي CSS در پنل کناري هستيد با دکمه Enter مي توانيد به سلول قابل اديت بعدي برويد، با اين دکمه مي توانيد براي ويرايش از يک خصوصيت به مقدار عددي آن و سپس به خصوصيت بعدي برويد. وقتي در آخرين خصوصيت يا مقدار يک بخش از يک سلکتور هستيد دکمه اينتر ، يک خط جديدي را براي افزودن خصوصيت و مقدار عددي جديد ارائه مي کند
اگر شما تمايل داريد CSSي را به عنصري که مقدار عددي و کلاس یا ID ندارد بدهید شما مي توانيد يک استايل inline در پنل نمايش تگ ها اضافه کنيد.

پنل CSS:

این پنل يک نمايي از کدهاي CSSی که شما در برگه های استایل دهی متعددی به صفحه اضافه کرده ايد، مي دهد. در Source edit مُد اديت سورس (يا منبع) شما به ويرايش مقادير يا ارزشها مي پردازيد ( که شبيه پنل HTML که راجع به آن توضيح داده ايم است) در اين بخش مي توانيد آزادانه کد هاي خود را مانند وقتي که در اديتور خود هستيد تايپ کنيد.

محدوديت ها و خصلت هاي فايرباگ (Firebug):

با توجه به اينکه فايرباگ داراري خصلت هاي خوب زيادي است اما سرعت انتشار امکانات جديد درون فايرفاکس ديوانه کننده است و چه کسي مي تواند از اين موضوع ايراد بگيرد؟
بگذاريد راجع به محدوديت هاي فاير باگ هم صحبت کنيم:
اين سخت است که عناصري را که داراي CSS و تحت تاثیر کدهای JavaScript هستند را اشکال زدايي کرد مانند منوهاي بازشونده (Drop-down) چون وقتي ماوس را روی آنها قرار می دهیم یا از روی آن بر می داریم خصوصيتشان کاملا عوض مي شود. موضوع اين است که شما بايد چاره اي بيابيد که به بررسي عناصر تودرتو (که تا زماني که روي عناصر اصلي کليک نکرده ايد پنهان هستند)، از طريق بررسي عناصر اصلي بپردازيد.
پيشنهاد ما اين است که از طريق خصوصيات استايل تگ های HTML اين عنصر را مجبور به باز شدن و ديده شدن کنید البته ايده خوبي براي تست هاي روي وب سايت هاي اجرا شده و لايو نيست اما تا حدي موثر است.

فايرباگ بعضي اوقات از کار مي افتد
بعضي اوقات پنل CSS قابلیت ارائه براي edit mode يا مد ويرايش نمي باشد و باعث ايجاد ارور مي شود علت اين موضوع هنوز واقعا مشخص نيست اما با بستن و باز کردن مجدد مرورگر دو باره به حالت عادي بر مي گردد.
فايرفاکس با ساير مرورگرهاي ديگر فرق دارد
نکته جالب ديگر اين است که فايرفاکس مرورگری عالي است، چون اشتباهات نشانه گذاري را خودش اصلاح مي کند. برای مثال کسي فراموش کرده است که تگ a را ببندد بعضي از مرورگرها ممکن است آن را به درستي ارائه نکنند و صفحه شما به هم ريخته شود. ولي مرورگر فاير فاکس تگ a را در جاي درست خودش نمايش مي دهد اين يعني شما چيزهايي را که در مرورگرهاي ديگر مشکل دار مي بيند در مرورگر فايرفاکس به درستي مي بينيد و به اين علت است که نحوه ارائه کردن اين کدها در مرورگرهاي مختلف متفاوت است.
اين بدين معني است که قسمتي از سايت شما که در فايرفاکس به درستي کار مي کند ممکن است در مرورگرهاي ديگر به علت ارائه کدها به شيوه هاي مختلف، هنوز داراي اشکال باشد.
فايرباگ شما را از چک کردن ساختار وب سايت خودتان در مرورگرهاي ديگر حفظ نمي کند. ما ابزارهايي هم در مروگر هاي ديگر داريم که مشابه کار فايرباگ را انجام مي دهد که به صورت زير معرفي مي شوند:
در Google Chrome, Safari, Internet Explorer و Opera ابزارهايي مشابه فايرباگ موجود است. براي کسب اطلاعات بيشتر از اين لينک ها استفاده کنيد:
•    Google Chrome: Chrome Developer ToolsFirebug Lite
•    Apple Safari: WebKit Web Inspector
•    Internet Explorer: Internet Explorer Developer Tools
•    Opera: Opera Developer Tools

این ها تنها بخشی از ابزار بزرگ فایرباگ هستند فایرباگ قسمت های گسترده تری دارد که بسته به مهارت و نیاز شما هر کدام کاربرد خاص خود را دارند.