آموزش کامل استفاده از افزونه Firebug فایرباگ

[Fased Shod ! 207]

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

[/align]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

۱- استایل style

2- قالب یا layout

3- محاسبه computed

4- سند مدل شیء یا DOM (document object model)

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

[/center]

[/center]

[/center]

[/center]

[/center]

[/center]

محدودیت ها و خصلت های فایر باگ

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

بگذارید راجع به محدودیت های فایر باگ هم صحبت کنیم:

عناصری در اچ تی ام ال که دارای خصوصیت هاور hover هستند

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

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

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

Menu item one
Menu item two
Menu item three

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

Menu item one
Menu item two
Menu item three

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

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

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

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

Home

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

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

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

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

[align=left]

Google Chrome: Chrome Developer Tools Firebug Lite

Apple Safari: WebKit Web Inspector

Internet Explorer: Internet Explorer Developer Tools

Opera: Opera Developer Tools

Mozilla Firefox: Add-ons[/align]

یک نکته را هم اضافه کنم که این آموزش 19 تصویر داشت ، ولی چون اجازه برای 19 تا داده نمی شد ، من مجبور شدم 10 تا بکنم. از مدیران جومینایی خواهش دارم که این مقدار را بیشتر کنند.

وبلاگینا

[ali_3001 0]

سلام

من الان سایتم راه اندازی شده و در حال کار هست

میخوام قسمتی از قالب رو تغییرات بهش بدم

این افزونه رو نصب کردم

چجوری تغییرات رو ایجاد کنم که این تغییر در فایلهای اصلی سایت اعمال بشه

مثلا من این افزونه رو نصب کردم و الان که در سایت شما هستم این افزونه رو فراخوانی می کنم و تغییراتی مثلا در رنگ فونت ایجاد می کنم

ولی این کار در سایت شما که اعمال نمیشه این تغییرات رو فقط من می تونم ببینم و فقط تا زمانی که صفحه رو ترک نکنم

خب حالا این برای سایت خودم هم صدق می کنه

حال شما بگین چجوری با این افزونه تغییرات همیشگی رو در سایت خودم اعمال کنم

با تشکر

[مصطفی صفرعلی 2,891]

با سلام

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

موفق و پیروز باشید

یا حق

:64 (17):

[goldpower 0]

با سلام

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

موفق و پیروز باشید

یا حق

:64 (17):

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

[مصطفی صفرعلی 2,891]

با سلام

اگر ماوس را روی لینک کناری (سمت راست) هاور کنید خواهید دید

تصویر بالا نشون میده که به فرض در خط 217 فایل position.css اون کدی که در سمت چپش میبینید در اون خط قرار دارد . مسیر فایل هم که در اون تولتیپ مشخصه

البته روشهای دیگری هم برای یافتن آدرس وجود داره !

مثلا" روی همون لینک راست کلیک کنید و گزینه Copy Location را انتخاب کنید تا آدرس در حافظه کپی بشه بعدش میتونید در هر جایی که خواستید paste کنید و آدرس را ببینید

از طریق لیستی هم که در سربرگ css هست هم میتوانید تمام آدرسها رو ببینید

برخی اوقات نیز دیدن محتوای تگ head در سورس سایت نیز میتونه موثر باشه

و ...

موفق و پیروز باشید

یا حق

:64 (17):