همه چیز درمورد Firebug

ابزار استنتاج کدهای client side وب Firebug

Firebug یک ابزار قدرتمند open source برای توسعه دهندگان وب است که اولین بار به صورت یک افزونه برای مروگر وب آMozilla Firefox ارائه شد . این ابزار ارزشمند برای توسعه دهنگان وب به صورت ضعیف تر همینک در مروگرهای chrome , IE , operaو برخی از مرورگرهای دیگر ادغام شده است . بوسیله این ابزار قدرتمند قادر به مشاهده و ویرایش و debug کردن کدهای HTML, CSS , JavaScript به صورت آنی در هر صفحه وبی خواهیم بود. بدین وسیله از کار حدسی در طراحی وب (تغییر استایلها و کدها و ریفرش کردن صفحه وب برای دیدن نتیجه و احتمالا ویرایش مجدد استایلها و کدها) که قبل از firebug به شدت مرسوم بود جلوگیری عمل آمده و این ویژگی باعث بالا رفتن سرعت تست debug و بازرسی مجدد صفخات و در نتیجه کاهش زمان انجام کار در طراحی و توسعه صفحات وب شده است.

شروع کار با firebug

برای کار با firebug شما نیاز به یک مرورگر Mozilla Firefox دارید . بعد از دانلود و نصب Mozilla Firefox از طریق همین مرورگر میتوانید با کلیک برروی دکمه add to firefox اقدام به نصب آخرین نسخه firebug کنید .
در حین مراحل نصب نیاز به انجام هیچ کاری نیست و مرورگر فایرفاکس خودش مراحل نصب را انجام میدهد و درپایان از شما درخواست میکند که مرورگرتان reset (باز و بسته) کند و شما باید این پیغام را بپذیرید.

باز کردن پنل firebug

برای کار با firebug نیاز داریم که پنل آنرا باز کنیم چندین راه برای باز کردن پنل firebug وجود دارد که آنها را بررسی میکنیم فقط دقت داشته باشید که پنل firebug مانند تصویر زیر است .

فعال کردن firebug با استفاده از کلیدهای shortcut

با استفاده کلید F12 شما میتوانید پنل firebug را باز (فعال و آماده استفاده) کنید . برای اطلاع از عملکرد سایر کلیدهای shortcut میتوانید از ین لینک استفاده کنید.

فعال کردن firebug با استفاده از منو

شما براحتی میتوانید در هر صفحه وب بروری یک عنصر HTML مانند(Div , Hyperlink , Image , Button , …) راست کلیک کنید و گزینه Inspect Element را از منو نمایش داده شده انتخاب کنید . مانند تصویر زیر.

آیکون firebug

شما همچنین میتوانید با کلیک برروی آیکون firebug پنل firebug را فعال کنید . مکان آیکون firebug بستگی به نسخه Firefox شما دارد ممکن در پائین صفحه باشد و ممکن است همانند مرورگر Google Chrome (اگر این افزونه را در Chrome نصب کرده باشید)در بالای صفحه در کنار نوار جستجو باشد.

نکته ای در مورد کارکردن با firebug استفاده از آن در پنجره جداگانه و اختصاصی

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

بررسی عناصر HTML یک صفحه وب

یک سوال که همیشه (تا قبل از پیدایش firebug) برای طراحان سایت مطرح بوده این بود که : مشکل از کجاست ؟ Where’s the flaw? مخفف آن (WTF) firebug کوتاهترین و راحتترین پاسخ به این سوال است . وقتی شما پنل firebug را باز میکنید از قسمت HTML Panel که به صورت پیش فرض وقتی firebug را باز میکنید این قسمت نمایش داده میشود میتوانید تمام عناصر html موجود در صفحه در این قسمت مشاهده کنید . فرض میکنیم شما برروی یک div گزینه Inspect Element را زدید (از طریق راست کلیک) در قسمت بالای پنل html تمام عناصر قبل از آن div تا عنصر body و head را به شما در یک نوار نشان میدهد بدین ترتیب شما براحتی میتوانید در divهای تودرتو کاوش کنید و عنصر مورد نظرتان پیدا کرده و بررسی کنید. قبل از این باید با استفاده از نرم افزارهای تجاری مانند Dream Viewer صفحه وب مورد نظر در سیستم تان ذخیره میکردید سپس آن صفحه را با این نرم افزار باز و عنصر مورد نظر را جستجو میکردید . در firebug علاوه بر یافتن عناصر موجود در صفحه استایلهای CSS ای که آن عنصر از آنها استفاده میکند در همان صفحه در Tab مجاور به شما نمایش میدهد. برای درک بهتر این ویژگی قسمت Node view همین مقاله را مطالعه فرمائید .

قسمت نمایش یک عنصر خاص

در ابتدا باید امکان Node View را فعال کنید برای اینکار در قسمت چپ پنل فعال firebug برروی آیکون مستطیل آبی رنگ کلیک کنید تا بتوانید از امکان Node View استفاده کنید. قسمت Node View (این قسمت در تصویر زیر مشخص شده است) تمام source ایجاد شده در صفحه جاری را به شما نمایش میدهد.

قسمت Node View علاوه ویژگیهایی که قبلا توضیح داده شد این امکان را به شما میدهد تا کد عنصر HTML مورد نظر را ویرایش کنید و نتیجه را آنی مشاهده کنید . این ویرایشها صرفا برای مشاهده نتیجه توسط شماست و به هیچ عنوان ذخیره نمیشود و با ریفرش شدن صفحه (کلید F5) صفحه به حالت قبل از ویرایش شما باز میگردد.
اگر Node View فعال باشد هنگامی که با ماوس برروی یک عنصر در صفحه وب میروید آن قسمت high light میشود و کد مربوط به آن قسمت در قسمت پنل Html نمایان میشود. این ویژگی کمک فوق العاده ای برای رفع مشکلات ناشی از margin , padding , float , … است.

یکی دیگر از ویژگیهای پرکاربرد و باقابلیت firebug ویژگی Element stack است پیشتر به آن اشاره کردیم واینک به بررسی کامل آن خواهیم پرداخت . وقتی که شما برروی عنصر Html ای در صفحه کلیک میکنید firebug درقسمت بالا پنل اش Element Stack را به شما نمایش میدهد یعنی شما براحتی تمام تگها و عناصر قبل از عنصر جاری (عنصر high lightشده توسط Node View) را میتوانید مشاهده کنید با این کار علاوه بر بررسی property های عنصر جاری و اطلاع از مکان دقیق آن در صفحه وب براحتی استایلهای css مربوط به آن عنصر را مشاهده کنید و حتی میتوانید آنها را تغییر دهید.

و برای کمک به یافتن و ویرایش هرچه سریع تر عناصر موجود در صفحه وقتی با که قابلیت node view فعال است و برروی عنصری در صفحه کلیک میکنیم آن قسمت هم در پنل firebug و هم در صفحه به صورت high light شده باقی میماند.در قسمت بعد بابررسی سایر ویژگیهای موجود در firebug از مزایای این قسمتهای high light شده بیشتر خواهیم فهمید.

پنل های مجاور قسمت HTML

بخش دوم firebug که در سمت راست قرار دارد خود نیز شامل 4 بخش است . این قسمتها اطلاعات جامع تری در مورد عنصر high light شده به شما خواهند داد. آن 4 بخش که به آنها اشاره کردیم عبارتند از :
1. بخش Style
2. بخش Computed
3. بخش Layout
4. بخش Dom

بخش Style

این بخش اطلاعاتی کاملی راجب اینکه عنصر جاری (High light شده) از چه استایلها CSS ای استفاده میکند به ما میدهد.

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

بخش Computed

این بخش اطلاعاتی راجب خصوصیتهای CSS مانند(font-size , color , text-align , …) عنصر html جاری ارائه میکند. در واقع این قسمت به شما میگوید که مرورگر شما به چه نحوی مقادیر استایلها و عناصر موجود در صفحه را ترجمه کرده . این قسمت کمک زیادی برای طراحی قابلهایی که در تمام مرورگرها به صورت یکسان نمایش داده شود میکند.

بخش Layout

این قسمت به صورت کاملا visual اندازه element یا عنصر یا چندین عنصر را که شما انتخاب کردید به شما نمایش میدهد از این قسمت شما علاوه بر اندازه width , height آن عناصر میتوانید اندازه border و مقدار padding , margin مربوط به آن عنصر یا عناصر مشاهده نمایید.

بخش Dom

این قسمت اطلاعات جامعی در مورد متغیرهای و توابع جاوا اسکریپت و مقدار آنها به شما میدهد . این قسمت برای توسعه دهندگان client-side که با Javascript]] , JQuery]] کد نویسی میکنند بسیار سودمند است.

مشاهده آنی نتایج تغییرات در HTML

صدها راه برای تغییرات در HTML و مشاهده نتایج آن تغییرات وجود دارد . ویرایش فایلها در سرور و ذخیره کردن آن تغییرات و مشاهده آن در مرورگر (نیاز به refresh کردن صفحه و دسترسی به سرور دارد) استفاده از نرم افزارهایی مثل Dream Weaver که یکسری امکانات در این زمینه به ما میدهند . Firebug این امکان را فراهم کرده که به صورت آنی (real time) کدهای client side از جمله HTML را ویرایش کنیم در قسمت Node view میتوانیم با گلیک کردن برروی عناصر html و استفاده از دکمه Edit کلیه محتویات html صفحه جاری را ویرایش و نتایج تغییرات را به صورت آنی مشاهده کنیم (بدون refresh کردن صفحه) .
به عنوان مثال در عناصر html به وفور مشاهده میشود که این عناصر از class و id خاصی استفاده میکنند شما براحتی با پاک کردن یا اضافه کردن آن کلاس و id ها به سایر عناصر میتوانید نتیجه ویرایش را ببینید یا میتوانید عنصر بیرونی یک تگ html را پاک کنید یا یک آن عنصر را داخل یک تگ قرار دهید . در قسمت Node View برروی قسمت Html هر گونه تغییر html ای قابل انجام است .

مشاهده آنی نتایج تغییرات در CSS

تغییر استایلهای(به کدهای css استایل هم میگویند) css در firebug یکی از بزرگترین و کاربردی ترین امکانات این افزونه است . همانطور که قبلا اشاره شد هر گاه در صفحه وب راست کلیک کرده و گزینه Inspect Element with firebug را انتخاب کنید علاوه بر مشاهده کدهای html در قسمت Node view میتوانید از پنجره مجاور آن(سمت راستی) کدها(به کدهای css استایل هم میگویند) مربوط به css را مشاهده و آنها را ویرایش کنید.

یافتن استایلهای اعمال نشده

وقتی که شما در css تان چندین استایل مشابه برای یک یا چند عنصر داشته باشید مثلا برای تگهای h1 , h2 , h3 , h4 استایلهای مشابهی دارید و در چندین فایل css مجزا برای این تگ ها استایل تعریف کردید (یا قالبی دانلود کردید که به صورت است و شما اطلاعی از آن ندارید) firebug این امکان را به شما میدهد و شما را از استایلهای که نوشته شده اند ولی مورد استفاده قرار نمیگیرند آگاه میسازد به این صورت به راحت و با سرعت میتوانید مشکل را پیدا کنید. به این صورت که firebug برروی این استایلها یک خط میکشد و شما میتوانید متوجه شوید این استایلها مورد استفاده قرار نمیگیرند (Over Written property) .

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

امکان enable و disable کردن استایلها

شما براحتی میتوانید با کلیک در کنار دستور css آنرا disable کنید و همزمان نتیجه را مشاهده کنید اگر قابل قبول آن دستور را از source اصلی پاک کنید و اگر قابل قبول نبود با کلیک مجدد برروی نام دستور آنرا به حال قبل بازگردانید.

---

جمع آوری شده توسط: شهاب مطاع پور

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

استفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.