فایرباگ – Firebug – چیست و چگونه از فایر باگ استفاده کنیم ؟

راهنمای , آموزش استفاده از فایر باگ – firebug – برای طراحان وب

فایر باگ – firebug – ، یک برنامه اپن سورس است و به عنوان ابزار اضافی یا کمکی ، برای توسعه وب استفاده می شود که مخصوص مرور گر موزیلا فایر فاکس – firefox – می باشد. این ابزار به طرز باورنکردنی قدرتمند است و با ابعاد وسیعی از امکانات و خصوصیات کاربردی ، برای هر طراح و یا توسعه دهنده وب مفید و مناسب است.
در واقع این امکان اضافی ( در مرور گر های دیگر با قابلیت کمتر نیز وجود دارد) یدک کش اسم مرور گر خود می باشد.فایر باگ دربین ابزار های دیگر( مانند ابزار بررسی و تست قالب و پروفایل اجرایی صفحات وب )، برای سرعت بخشیدن به روند کاری، زمان انجام عملیات آزمون و خطا را هنگام دی باگ کردن یا رفع اشکال صفحات وب کاهش می دهد.

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

فایر باگ – firebug

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

پنل فایر باگ را باز کنید

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

باز کردن فایر باگ با استفاده از کلید های میانبر

با فشردن دکمه F12 از صفحه کلید می توانید پنل فایر باگ را خاموش و روشن کنید.بقیه کلید های میانبر برای فایر باگ را از این صفحه ملاحظه کنید.

استفاده از فایر باگ از طریق Context Menu مرور گر

در هر صفحه از وب سایت با کلیک راست کردن روی صفحه، بخشی از html صفحه( هایپرلینک، دکمه ها، تصاویر ) و بعد از انتخاب inspect element از منو، پنل فایر باگ ظاهر می شود.

آیکون فایر باگ

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

استفاده از فایر باگ در یک پنجره جدید روی صفحه

زمانی که پنل فایر باگ شما روشن است دلتان می خواهد که آن را به صورت یک پنجره جدید و به صورت مجزا و در پنجره مخصوص به خودش مشاهده کنید. دکمه نمایش در پنجره جدید را از فایر باگ کلیک کنید این کاره برای مانیتورهای بزرگ و تنظیمات کامپیوترهایی که از چند مانیتوره به صورت همزمان استفاده می کنند مفید است.

حالا شما آماده هستید که مشکلات موجود را برطرف کنید. در مطالب بعدی در مورد ویژگی های فایر باگ و تکنیکهای مفید آن توضیحاتی خواهیم داد.

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

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

در پنل HTML دو بخش در پنل وجود دارد

قسمت نمایش ند ها

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

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

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

برای اینکه هر چه سریعتر به عنصر اچ تی ام ال مورد نظر خود دستیابید می توانید از نوار جستجوی سمت راست پنل استفاده کنید که با های لایت توسی در بخش نمایش ند ها ، بخش مورد نظر را نمایش خواهد داد.

پنل کناری نمایش کد های اچ تی ام ال

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

در پنل کناری 4 پنل دیگر موجود است:

• 1- استایل style
• 2- قالب یا layout
• 3- محاسبه computed
• 4- سند مدل شیء یا DOM (document object model)

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

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

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

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

اصلاح اچ تی ام ال اجرا شده

صد ها راه مدیریت اجرای اچ تی ام ال در جریان کاری، از طریق دسترسی به فایل ها روی سرور یا وقتی که با استفاده از سرور لوکال از وب سرور XAMPP یا wamp server استفاده می کنید، وجود دارد. من فکر می کنم که اکثر طراحان وب ترجیح می دهند که کد ها را از طریق ادیتور خود اجرا و ادیت نمایند زیرادر این حالت هر تغییر و ویرایش روی کد ها در فضای امن تری انجام می شود.

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

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

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

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

<div class="flyout-menu">
  <ul>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
  </ul></div>

می توانید استایل inline زیر را به div مورد نظر ( با توجه به طرز پنهان شدن div و نظر به اینکه شما می خواهید از دستکاری DOM جاوا اسکریپت بپرهیزید ) اضافه کنیم.

<div class="flyout-menu" style="display:block;">
  <ul>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
  </ul></div>

فایر باگ بعضی اوقات از کار می افتد

بعضی اوقات پنل سی اس اس قابل ارائه برای edit mode یا مد ویرایش نمی باشد و باعث ایجاد ارور می شود علت این موضوع هنوز واقعا مشخص نیست اما با بستن و باز کردن مجدد مرورگر دو باره به حالت عادی بر می گردد.

فایر فاکس با سایر مرور گر های دیگر فرق دارد

نکته جالب دیگر این است که فایر فاکس مرور گر عالی و در بعضی مواقع خیلی عالی، چون اشتباهات نشانه گذاری را خودش اصلاح می کند. برای مثال فرض کنید عنصر زیر به صورت یک عنصر از یک لیست است.

 <li><a href="home.htm">Home</li>

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

این بدین معنی است که قسمتی از سایت شما که در فایر فاکس به درستی کار می کند ممکن است در مرور گر های دیگر به علت ارائه کد ها به شیوه های مختلف ، هنوز دارای اشکال باشد.

فایر باگ شما را از چک کردن ساختار وب سایت خودتان در مرورگر های دیگر حفظ نمی کند. ما ابزارهایی هم در مروگر های دیگر داریم که مشابه کار فایر باگ را انجام می دهد که به صورت زیر معرفی می شوند:

در Google Chrome, Safari, IE و Opera ابزار هایی مشابه فایر باگ موجود است که برای کسب اطلاعات بیشتر از این لینک ها استفاده کنید:

• Google Chrome: Chrome Developer ToolsFirebug Lite
• Apple Safari: WebKit Web Inspector
• Internet Explorer: Internet Explorer Developer Tools
• Opera: Opera Developer Tools