طراحی سایت ساناتک
0
معرفی افزونه Firebug در مرورگر موزیلا برای دیباگ کردن سایت

مرورگر فایرفاکس به خاطر داشتن افزونه های کاربردی خصوصا برای برنامه نویسان وطراحان وب محبوب است. یکی از مهمترین این افزونه ها Firebug است که به طور خاص برای طراحی سایت و خصوصا کد سمت کلاینت یعنی js,css,html کاربرد دارد. این addons بیش از 650000  بار دانلود و نصب شده و شامل امکانات وسیع در یک محیط user friendly می باشد. به کمک فایرباگ می توانید به صورت آنلاین کدهای سمت کلاینت را ویرایش کنید. این کار باعث می شود دیگر لازم نباشد برای مشاهده هر تغییر کوچک فایلهای وبسایت خود را روی سرور آپلود کنید. همچنین سرعت برنامه نویسی تحت وب را نیز بسیار افزایش می دهد. همچنین امکان دیباگ کردن و رفع باگ ها و خطاهای کد نویسی را نیز فراهم می کند.

افزونه firebug

برای فعال کردن فایرباگ بعد از نصب دکمه F12 را باید بزنید. شروع کار با فایرباگ با انتخاب یک تگ آغاز می شود. تگ ها (Tags) اجزای کد html هستند که محتوایشان شامل تگ های دیگر یا متن وعکس می باشد و میتوان به آن ها توسط Css استایل داد. برای انتخاب یک تگ در فایرباگ چهار راه وجود دارد:

  • کاوش کردن تگ ها در تب Inspector

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

  • استفاده از دکمه Pick an element

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

معرفی افزونه firebug

  • راست کلیک روی تگ

بعد از نصب فایرباگ، با راست کلیک هر جای صفحه وب و انتخاب گزینه Inspect Element نیز می توان تگ مورد نظر را انتخاب کرد.

  • جستجوی تگ بر اساس Id یا Class

سمت راست پنل اصلی فایرباگ یک باکس برای جستجو قرار دارد می توان تگ مورد نظر را با جستجوی Id یا Class آن پیدا کرد. در مواقعی که نمیدانید تگ مورد نظر کجای صفحه قرار دارد استفاده از این روش بسیار سریع و کارآمد است.

 به هر طریقی که تگ را انتخاب کنید در سمت راست فایرباگ، تب اول یعنی Pules کدهای css ی که مربوط به تگ می باشد نمایش داده می شود. به راحتی می تواند این کدها را ویرایش کنید، حذف کنید و یا اضافه کنید و هر کار دیگری که در یک فایل css و یا html انجام شدنی است یه صورت آنلاین انجام دهید. می توانید به تگ ها Id  یا class های جدیدی بدهید یا آنها را ویرایش کنید. همچنین امکان مشاهده یا ویرایش pseudo class ها مثل hover, active, focus نیز وجود دارد

در تب های computed و layout می توانید وضعیت  background و padding و margin و همچنین grid بندی تگ ها را مشاهده کنید. در تب Animation می توانید کدهای مربوط به این وضعیت را مشاده کنید یا آنها را ویرایش کنید. البته اگر از این کدها استفاده شده باشد. امکان ویرایش و دیباگ کردن کدهای js هم در تب Console وجود دارد. همچنین می توان درخواست های آژاکس Ajax  و خروجی response آنها را در این تب مشاهده کرد.

تعداد بازدید: 245
مطالب دیگر وبلاگ
ایمیل مارکتینگبهینه سازی تصاویر در سئوی سایتافزایش بازدید سایت از طریق لینک های شبکه های اجتماعیچرا کسب و کار شما به وب سایت نیاز داردروش های افزایش سرعت لود وب سایت
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید