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

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

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, آموزش استفاده از فایرباگ فایرفاکس, آموزش بکارگیری فایرباگ برای توسعه وب, آموزش گام به گام استفاده از فایرباگ

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

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

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

طریقه نصب فایرباگ در موزیلا فایرفاکس

زمانی که فایرباگ را نصب کرده و فعال می کنیم، آیکون یک حشره کوچک در گوشه راست بالای مرورگر فایرفاکس ظاهر می شود. برای نصب فایرباگ به وبسایت http://getfirebug.com مراجعه کرده و سپس دکمه install را کلیک می کنیم. بعد از نصب افزونه، به منوی ابزار فایرفاکس رفته و گزینه Add-ons را انتخاب می کنیم، سپس روی برگه Extensions کلیک می کنیم. فایرباگ نصب شده بایستی در این لیست وجود داشته باشد. برای فعال کردن آن در این لیست، فایرباگ را انتخاب کرده تا فعال شود.

طریقه اجرای فایرباگ

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

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

برگه های فایرباگ

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

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, آموزش استفاده از فایرباگ فایرفاکس, آموزش بکارگیری فایرباگ برای توسعه وب, آموزش گام به گام استفاده از فایرباگ

روی آیکون فایرباگ کلیک کنید تا یک منوی کشویی با گزینه های قابل انتخاب ظاهر شود. حال روی آیکون بعدی (پنجره ای با یک پیکان بر روی آن) کلیک کنید، می توانید عنصری را از پنجره مرورگر انتخاب کنید و کد HTML و CSS آن را مشاهده کنید.

آیکون دو پیکان (علامت بزرگتر و کوچکتر) به شما اجازه می دهند که برگه های مختلف ابزار را مرور کنید.

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

برگه کنسول (Console) پنجره کنسول را باز می کند. این پنجره برای اشکال زدایی و دیباگ کردن استفاده می شود. این کنسول نشان می دهد که اسکریپت در حال اجرای چه چیزی است و خطاها را نمایش می دهد.

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

در برگه CSS تمامی استیل شیت هایی که در حال حاضر در سند وب پیج بارگذاری شده اند را نمایش می دهد.

برگه اسکریپت (Script) فایل های جاوا اسکریپت که در صفحه بارگذاری شده اند را نمایش می دهد.

برگه DOM اجازه می دهد که خصیصه های DOM وب پیج را بررسی کنید.

برگه نت (Net) به شما اجازه می دهد که عناصری که در وب پیج بارگذاری می شوند را مشاهده کنید.

برگه کوکی ها (Cookies) به شما امکان دیدن کوکی هایی که توسط وب پیج دسترسی و استفاده می شوند را ببینید.

طریقه استفاده از برگه HTML برای سبک دهی به وب پیج جوملا

در سمت چپ پانل HTML فایرباگ می توانید تمامی تگ های HTML موجود در سند را ببینید، هر گونه استیل سر خود (inline) و محتوای هر تگ HTML نیز نمایش داده می شود. می توانید عنصر والد را از طریق زدن علامت بعلاوه (+) کنار آن باز کنید و عناصر بچه هر والد را بررسی کنید.

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, آموزش استفاده از فایرباگ فایرفاکس, آموزش بکارگیری فایرباگ برای توسعه وب, آموزش گام به گام استفاده از فایرباگ

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

در این پانل می توان محتوای درج شده در بخش <head> وب پیج از قبیل متا تگ ها، لینک به استیل شیت یا اسکریپت ها و غیره را دید. کد گوگل آنالایتیک نیز بارگذاری شده و در این پانل دیده می شود.

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

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, آموزش استفاده از فایرباگ فایرفاکس, آموزش بکارگیری فایرباگ برای توسعه وب, آموزش گام به گام استفاده از فایرباگ

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

این ابزار دارای برگه های دیگری است مثل برگه computed که نتیجه نهایی تمامی استیل های اعمال شده را نشان می دهد یا برگه layout که حاشیه و فاصله های عنصر منتخب را نشان می دهد. برگه Events به شما اجازه می دهد که event listeners گره منتخب را بررسی کنید (برای جاوا اسکریپت استفاده می شود).

سفارشی کردن قالب پروتواستار

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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