آموزش کامل فایرباگ (FireBug)

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

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

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

با سلام ببینید این آموزش کمکتون میکنه : خطا

کامل هست اینم جلسه دوم میتونید از همین به آموزشهای دیگر هم برسید :خطا

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

این ابزار امکانات و قابلیت*های فراوانی دارد که فراگیری آنها برای یک توسعه گر یا طراح وب سایت ضروری به نظر می*رسد .

در سری مقالات آموزش فایرباگ ، با این ابزار محبوب و پرکاربرد بیشتر آشنا می*شویم .

نصب و اجرای فایرباگ :

ابتدا وارد این صفحه شوید و ورژن مناسب مرورگرتان را نصب نمایید .

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

تب*ها :

فایرباگ در حالت پیشفرض دارای 6 تب می*باشد .

Console : در این تب دو بخش وجود دارد :

در بخش Log هشدار*ها ، پیغام*ها ، درخواست*های XHR و ... نمایش داده می*شوند .

بخش دیگر هم که در سمت راست قرار دارد ، مخصوص اجرای کدهای جاوا اسکریپت می*باشد .

[ATTACH=CONFIG]5300[/ATTACH]

HTML : در این تب HTML صفحه را بصورت درختی و بصورت Live مشاهده می*کنید .

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

همچنین در این تب می*توانید محتوای HTML قسمت Body صفحه را ویرایش کنید .

[ATTACH=CONFIG]5301[/ATTACH]

CSS : در این تب می*توانید تعاریف CSS موجود در صفحه را مشاهده/ویرایش/حذف/فعال-غیرفعال نمایید .

همچنین می*توانید تمام فایل*های استایلی که به صفحه اضافه شده اند را مشاهده و تعیین کنید که تعاریف موجود در کدام فایل*ها در این محیط نمایش داده بشوند .

[ATTACH=CONFIG]5302[/ATTACH]

Script : در این تب می*توانید به خطایابی کدهای جاوا اسکریپت بپردازید . همچنین مانند تب CSS می*توانید یکی از فایل*های اضافه شده به صفحه برای نمایش در این بخش ، چند مورد را انتخاب کنید .

[ATTACH=CONFIG]5303[/ATTACH]

DOM : در این تب می*توانید ساختار DOM صفحه جاری را مشاهده نمایید .

[ATTACH=CONFIG]5304[/ATTACH]

Net : در این تب می*توانید درخواست هایی که از صفحه ارسال می*شوند را زیر نظر بگیرید .

این تب اطلاعات کاملی درباره*ی هر درخواست ارائه می*کند .

از جمله : نوع درخواست ( Post/Get ) ، حجم درخواست و پاسخ ، مدت زمان درخواست ، تعداد درخواست*های ارسال شده ، وضعیت درخواست*ها و ...

[ATTACH=CONFIG]5305[/ATTACH]