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

به خاطر همین کاربرد فایرباگ بیشتر افرادی که در زمینه ی طراحی سایت و سی اس اس کار می کنند از این برنامه برای رفع عیوب وب سایت خود و همچنین بررسی استراکچر سایت های دیگر استفاده می کنند . همانطور که از اسم این برنامه پیداست این برنامه یدک کش اسم مرورگر خود یعنی فایرفاکس می باشد .شما می توانید پس از دانلود این برنامه و مرورگر فایر فاکس به تشریح وب سایت ها بپردازید .برای استفاده از این برنامه از دکمه ی 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 بررسی و رفع عیب کنیم و جاوا اسکریپتی وجود دارد که باعث می شود منو زمانی که موس روی ان نیست پنهان شود .