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

به خاطر همین کاربرد فایرباگ بیشتر افرادی که در زمینه ی طراحی سایت و سی اس اس کار می کنند از این برنامه برای رفع عیوب وب سایت خود و همچنین بررسی استراکچر سایت های دیگر استفاده می کنند . همانطور که از اسم این برنامه پیداست این برنامه یدک کش اسم مرورگر خود یعنی فایرفاکس می باشد .شما می توانید پس از دانلود این برنامه و مرورگر فایر فاکس به تشریح وب سایت ها بپردازید .برای استفاده از این برنامه از دکمه ی F12 استفاده می کنند .

برای استفاده از فایرباگ از طریق context menu مرورگر کافی ست با کلیک راست کردن در سایت گزینه ی inspect element را انتخاب کرده  تا پنل فایرباگ ظاهر شود . همچنين براي باز کردن پنل فاير باگ مي توانيد روي دکمه فاير باگ کليک کنيد. با توجه به ورژن فاير فاکس شما اين آيکون در پائين صفحه سمت راست يا بالا سمت راست کنار نوار جستجو قرار مي گيرد .

برای استفاده از فایرباگ در یک پنجره جدید روی صفحه می توانید از دکمه نمایش در پنجره جدید را از فایرباگ کلیک کنید . باتوجه به اینکه کار اساسی فایرباگ بررسی می باشد این پنل به شما در بررسی و درک html عناصر درون صفحه کمک می کند.در سمت چپ صفحه شما قسمت نمایش ند وجود دارد که تشکیل دهنده صفحه ای که در مرورگر شما باز است را نمایش می دهند .

ندها به شما کمک می کند تا به ویرایش عناصر html بپردازید این ابزار نشان می دهد که مرورگر به چه صورت به پیاده سازی و اجرا کردن عناصر اچ تی ام ال در صفحه می پردازد و عناصر مشخص در کجای صفحه قرار دارد با استفاده از این ابزار می توانید به مشکلات مربوط به margin و padding در صفحه پی ببرید . وقتي که شما بر روي ند هاي اچ تي ام ال کليک مي کنيد روي نوار بالاي بخش نمايش ند ها، مسير هر ند نمايش داده خواهد شد . از اين مسير براي افزودن يا نوشتن هر نوع سي اس اس مورد نياز بطور مخصوص و مشخص، براي يک بخش به خصوص، از عناصر وب سايت که مشابه قسمت هاي ديگر در صفحه وب سايت شما مي باشد و همچنين براي دريافتن اينکه بخشها و عناصر صفحه داراي چه خصوصياتي از سي اس اس هستند استفاده مي کنيم . براي اينکه هر چه سريعتر به عنصر اچ تي ام ال مورد نظر خود دست يابيد مي توانيد از نوار جستجوي سمت راست پنل استفاده کنيد که با هاي لايت توسي در بخش نمايش ند ها ، بخش مورد نظر را نمايش خواهد داد .

 حال به تعریف پنل کناری که در سمت راست دیده می شود می پردازیم . این پنل 4 پنل دیگر را در خود جای داده است که عبارتند از :

1) استایل : پنل استايل style در پنل کناري به شما تاثير سي اس اس هاي مهم عناصر صفحات وب را نمايش مي دهد اين پنل نمايي از استايل شيت ( صفحه نوشتن کد هاي سي اس اس ) با شماره خط آن سي اس اس را نمايش مي دهد. در اين حالت شما بيشتر از يک استايل شيت خواهيد داشت .

2) قالب : در پنل محاسبات يا computed ، شما خصوصيات سي اس اس را مشاهده خواهيد کرد مانند font-size, font –color,text-align و غيره اين اطلاعات به شما در درک نحوه ارائه اين کد ها توسط مرورگر کمک ميکند .

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

4) سند مدل شیء یا DOM : پنل DOM ، در واقع سند مدل شيء يک عنصر در صفحه وب را نمايش مي دهد اين بخش بيشتر براي کساني که با جاوا اسکريپت يا اسکريپت هاي کلاينت سايد کار مي کنند مناسب است .

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

افزودن / ويرايش کردن و حذف کردن تمام عناصر اچ تي ام ال

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

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

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

قرار داد تکميل کننده هاي بيشتر در عنوان ، متن ها و روي دکمه ها براي تست line brek يا شکست خطوط متني

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

مثلا آيا اين هايپر لينک hyperlink با اين استايل بهتر مي شود style=”color:#00aeef” or style=”color:# 067fad”

فاير باگ کد هايي ويرايش شده را ذخيره نمي کند . در صورت کليک يک لينک با رفرش کردن صفحه تغييرات انجام شده ناپديد مي شوند . بنابر اين بهتر است يک اديتور متون مثل نت پد در کنار خود داشته باشيد که کد هاي جديد و دستاورد هاي خود را در آن يادداشت کنيد
اصلاح سي اس اس هاي اجرا شده .

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

اين سلکتورها در دستور سي اس اس هاي ارائه شده نمايان مي شود سي اس اس هاي که در صفحه استايل شيت آخر نوشته شده اند بالا تر قرار مي گيرند و آنهايي که در استايل شيت در ابتداي صفحه نوشته شد ه اند در پائين صفحه قرار مي گيرند . مثال بالا در مورد وب سايت هايي داراي چندين صفحه استايل يا استايل شيت متفاوت است .

فاير باگ عناصر اچ تي ام الي که فعال و در تغييرات موثر هستند را با کشيدن خط روي عناصر سي اس اسي که جايگزين آنها شده اند، مشخص مي کند. اگر روي يکي از عناصر خطي کشيده شده بود اين بدين معني است که قانون ديگري در سي اس اس اوليت بيشتري نسبت به اين قانون بر روي يک عنصر واحد داشته است .

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

شما حتي مي توانيد خصوصيتي را غير فعال کنيد و ببيند در صورت عدم وجود اين قانون صفحه وب به چه صورت تغيير ميکند. اين قابليت براي پيدا کردن کد ها و خطوط غير قابل استفاده در سي اس اس مفيد مي باشند و به شما در کشف علت استفاده خصوصيات مختلف کمک مي کند .

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

اگر شما تمايل داريد سي اس اس ي را به عنصري که مقدار عددي و کلاس ID ندارد ( که در اينصورت در پنل سمت راست کناري ديده نخواهد شد ) شما ميتوانيد يک استايل inline در پنل نمايش ند هاي سمت چپ با در پنل سي اس اس اضافه کنيد .

پنل سي اس اس يک نمايي را از کد هاي سي اس اس در استايل شيت هاي متعدد که شما به سايت اضافه کرديد مي دهد Source edit mode مد اديت سورس يا منبع، شما به ويرايش مقادير يا ارزشها مي پردازيد ( که شبيه پنل اچ تي ام ال سمت راست است که ما راجع به آن توضيح داده ايم ) در اين بخش مي توانيد آزادانه کد هاي خود را مانند وقتي که در اديتور خود هستيد تايپ کنيد .

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

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

پيشنهاد اين است که از طريق خصوصيات استايل اچ تي ام ال اين عنصر را مجبور به باز شدن و ديده شدن آن نمائيد البته ايده خوبي براي تست هاي روي وب سايت هاي اجرا شده و لايو نيست اما تا حدي موثر است .

در مثال زير مي خواهيم يکي از آيتم هاي ليست غير منظم را از منوي flyout-menu بررسي و رفع عيب کنيم و جاوا اسکريپتي وجود دارد که باعث مي شود منو زماني که موس روي ان نيست پنهان شود .