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

00

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

00

 

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

فایر باگ – firebug

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

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

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

02

 

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

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

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

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

 

03

 

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

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

 

04

 

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

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

 

05

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

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

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

 

06

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

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

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

07

 

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

 

018

 

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

 

09

 

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

 

10-09

 

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

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

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

  • ۱- استایل style
  • ۲- قالب یا layout
  • ۳- محاسبه computed
  • ۴- سند مدل شیء یا DOM (document object model)

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

 

11-9

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

 

12-03

 

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

 

0-13

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

اصلاح سی اس اس های اجرا شده

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

 

0-14

 

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

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

 

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *