فایرباگ چیست و کارکردن با آن چگونه می باشد؟

10 / 10
از 1 کاربر

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

فایرباگ

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

برای استفاده از فایرباگ از طریق context menu مرورگر کافی ست با کلیک راست کردن در سایت گزینه ی inspect element را انتخاب کرده  تا پنل فایرباگ ظاهر شود . همچنين براي باز کردن پنل فاير باگ مي توانيد روي دکمه فاير باگ کليک کنيد. با توجه به ورژن فاير فاکس شما اين آيکون در پائين صفحه سمت راست يا بالا سمت راست کنار نوار جستجو قرار مي گيرد .

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

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

 حال به تعریف پنل کناری که در سمت راست دیده می شود می پردازیم . این پنل 4 پنل دیگر را در خود جای داده است که عبارتند از :

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

2) قالب : در پنل محاسبات يا computed ، شما خصوصيات سي اس اس را مشاهده خواهيد کرد مانند font-size, font –color,text-align و غيره اين اطلاعات به شما در درک نحوه ارائه اين کد ها توسط مرورگر کمک ميکند .

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

4) سند مدل شیء یا DOM : پنل DOM ، در واقع سند مدل شيء يک عنصر در صفحه وب را نمايش مي دهد اين بخش بيشتر براي کساني که با جاوا اسکريپت يا اسکريپت هاي کلاينت سايد کار مي کنند مناسب است .

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

افزودن / ويرايش کردن و حذف کردن تمام عناصر اچ تي ام ال

براي مثال در صورت حذف اين div چه اتفاقي براي floats صفحه خواهد افتاد؟

افزودن / ويرايش و حذف ID وکلاس

براي مثال در صورت حذف اين کلاس آيا خصوصيات ارائه شده با مشکل مواجه مي شوند؟

قرار داد تکميل کننده هاي بيشتر در عنوان ، متن ها و روي دکمه ها براي تست line brek يا شکست خطوط متني

افزودن استايل هاي inline موقتي براي تست سريع با استفاده از خصوصيات html

مثلا آيا اين هايپر لينک hyperlink با اين استايل بهتر مي شود style=”color:#00aeef” or style=”color:# 067fad”

فاير باگ کد هايي ويرايش شده را ذخيره نمي کند . در صورت کليک يک لينک با رفرش کردن صفحه تغييرات انجام شده ناپديد مي شوند . بنابر اين بهتر است يک اديتور متون مثل نت پد در کنار خود داشته باشيد که کد هاي جديد و دستاورد هاي خود را در آن يادداشت کنيد
اصلاح سي اس اس هاي اجرا شده .

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

اين سلکتورها در دستور سي اس اس هاي ارائه شده نمايان مي شود سي اس اس هاي که در صفحه استايل شيت آخر نوشته شده اند بالا تر قرار مي گيرند و آنهايي که در استايل شيت در ابتداي صفحه نوشته شد ه اند در پائين صفحه قرار مي گيرند . مثال بالا در مورد وب سايت هايي داراي چندين صفحه استايل يا استايل شيت متفاوت است .

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

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

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

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

اگر شما تمايل داريد سي اس اس ي را به عنصري که مقدار عددي و کلاس ID ندارد ( که در اينصورت در پنل سمت راست کناري ديده نخواهد شد ) شما ميتوانيد يک استايل inline در پنل نمايش ند هاي سمت چپ با در پنل سي اس اس اضافه کنيد .

پنل سي اس اس يک نمايي را از کد هاي سي اس اس در استايل شيت هاي متعدد که شما به سايت اضافه کرديد مي دهد Source edit mode مد اديت سورس يا منبع، شما به ويرايش مقادير يا ارزشها مي پردازيد ( که شبيه پنل اچ تي ام ال سمت راست است که ما راجع به آن توضيح داده ايم ) در اين بخش مي توانيد آزادانه کد هاي خود را مانند وقتي که در اديتور خود هستيد تايپ کنيد .

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

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

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

ارسال نظر و نظرات ثبت شده
مریم :
11 2
مطالبتون خیلی عالیه اگه میشه منبع آنها را هم بنویسید ممنون
مصطفی :
6 0
مطالب عالی و آموزنده ای بود.من تازه با این نرم افزار آشنا شدم و خیلی ازش خوشم اومد.با سپاس
آموزش طراحی سایت
مقاله هدف از طراحی سایت
مقاله فرآیند هایی که وب سایت می بایست از آنها حمایت کند
مقاله مخاطبین وب سایت
مقاله مینیمالیسم اصل اساسی در طراحی وب سایت
مقاله اصولی که باید در طراحی وب رعایت کرد
مقاله مقدمه آموزش طراحی سایت
مقاله آموزش html در کنار آموزش طراحی سایت
مقاله آموزش css در کنار آموزش طراحی سایت
مقاله آموزش سئو در کنار آموزش طراحی سایت
مقاله نکاتی راجع به طراحی فروشگاه اینترنتی
مقاله بهینه سازی حجم صفحات وب و تاثیر آن بر طراحی سایت
مقاله اصول استفاده از رنگها در طراحی سایت
مقاله فرمت های گرافیکی در طراحی سایت
مقاله اشتباهات رایج در طراحی سایت
مقاله المانهای آزار دهنده در طراحی وب سایت
مقاله ویژگی های یک وب سایت موفق
مقاله نحوه تعمیر و نگهداری سایت
مقاله روش پیدا کردن اولین مشتری در طراحی سایت
مقاله تفاوت http با https در امنيت اطلاعات
مقاله هفت دلیل برای موفقیت وب سایت
مقاله روش هایی برای جذب بازدیدکننده وب سایت
مقاله فایرباگ چیست و کارکردن با آن چگونه می باشد؟
مقاله مزایا و معایب طراحی سایت های داینامیک
مقاله می خواهم طراح وب شوم
مقاله بازاریابی از طریق موتورهای جستجو
مقاله ریشه همه مشکلات رمز عبور:بگو نه به کلمات عبور به اشتراک گذاشته شده
مقاله چگونه در دنیای دیجیتال ارتباط خود را با مشتری مدیریت کنیم
مقاله معرفی کامل رشته فناوری اطلاعات
مقاله چگونه اقدام به برنامه ریزی استراتژیک کنیم
مقاله فناوری اطلاعات و موارد استفاده آن در مدیریت کسب و کار
مقاله طراحی یک چشم انداز عملی برای زندگی شما
مقاله وب سایت خود را به SSL مجهز کنید
مقاله هوشمندی تجاری چیست
مقاله مدیران پروژه موفق چه ویژگی هایی دارند
مقاله معرفی کامل دیسک های Blu-ray
مقاله هفت نکته کلیدی برای موفقیت در بازاریابی جهانی
مقاله نکات بازاریابی اینترنتی و بازاریابی ایمیل
مقاله اهمیت شبکه های اجتماعی در بازاریابی اینترنتی
مقاله Bounce Rate چیست و چگونه عمل می کند
مقاله مزایا و معایب سایت های فلش
مقاله اینفوگرافیک در طراحی سایت
مقاله W3C چیست ؟
مقاله تجارت و کسب و کارهای اینترنتی
مقاله انواع طراحی سایت بر اساس رابط کاربری وب
مقاله دلایل عدم مطالعه محتوای وب سایت
مقاله تفاوت طراحی وب سایت و توسعه وب سایت
مقاله معماری در طراحی سایت و افزایش سود دهی
مقاله طراحی سایت روان یا Liquid Design
مقاله هفت روش دریافت نظر و کامنت در پست های وب سایت
مقاله مزایا و معایب پست مهمان در طراحی سایت
مقاله آموزش ساخت شناسه ایرنیک
مقاله آموزش تنظیم رابطه های مجاز دامنه در ایرنیک
مقاله چند نکته انکار ناپذیر در طراحی سایت
مقاله نکاتی در طراحی سایت های دو زبانه
مقاله نکات مهم برای جذب بازدید کننده
مقاله طراحی سایت واکنش گرا
مقاله اشتباهاتی که نباید در طراحی وب سایت مرتکب شد
مقاله نحوه افزایش سرعت ایندکس مطالب جدید سایت
مقاله علل عدم موفقیت وب سایت
مقاله CMS و مزایای استفاده از آن
مقاله اهمیت صفحه ی اصلی سایت در ترافیک وب سایت
مقاله چگونه یک وب سایت موفق داشته باشیم؟
مقاله چرا باید سایت داشته باشیم؟
مقاله چگونگی بیان درخواست به طراح سایت
مقاله چند نکته ساده که هر طراح وب باید بداند!
مقاله نکات طراحی سایت در سال 2014
مقاله اهمیت گالری تصاویر در وب سایت
مقاله جیمیل به شما پیشنهاد توقف دریافت ایمیلهای اسپم را می دهد
مقاله معرفی سرویس OptinMonster (کاربران را در سایت خود نگاه دارید)
مقاله چطور یک کامنت عادی برای من 650 دلار سودآوری کرد؟
مقاله برای مدیریت حرفه ای یک وبسایت به چه نیازمندید؟
مقاله گوگل درصدد ساختن آینده ای با دختران کدنویس است
مقاله معیارهای انتخاب طراح سایت
مقاله Hero header در طراحی سایت
مقاله استفاده از فضای منفی در طراحی سایت
مقاله اصول طراحی سایت برای نوجوان
مقاله طراحی سایت با دکمه های نامرئی
مقاله اینفوگرافیک چیست؟
مقاله تکنیک های طراحی سایت Infinite Scrolling
مقاله روند طراحی سایت در 2015 چگونه خواهد بود؟
مقاله بهترین ابزارهایی که برای طراحی سایت میتواند از آن ها استفاده کرد
مقاله نکات امنیتی که در طراحی سایت باید رعایت شوند
مقاله تکنیک آپلود کردن تصاویر به صورت فونت در طراحی سایت
مقاله طراحی سایت با فرمت فلش
مقاله طراحی سایت برای موبایل
مقاله روش های مختلف طراحی سایت
مقاله مقایسه سرعت اجرایی php با asp.net
مقاله مشتری جهنمی
مقاله طراحی سایت با RUP
مقاله طراحی سایت با روش پارالاکس
مقاله تاریخچه طراحی سایت (اینفوگرافیک)
مقاله با 6 قدم در گوگل سایتز سایت خود را به صورت رایگان بسازید
مقاله تفاوت بین توسعه دهندگان وب و طراحان سایت
مقاله کارت ویزیت طراح سایت
مقاله بیماری هایی که ممکن است یک طراح سایت به آن ها مبتلا شود.
مقاله نرم افزار موبایل یا سایت ریسپانسیو، کدام بهتر است؟
مقاله آموزش طراحی سایت ریسپانسیو و واکنشگرا
مقاله متا تگ viewport و استفاده از آن در طراحی سایت ریسپانسیو
مقاله مدیا کوئری و استفاده از آن در طراحی سایت ریسپانسیو
مقاله گوگل و طراحی متریال
مقاله چه مواردی در طراحی سایت برای کاربر آزار دهنده است؟
مقاله طراحی سایت کاربر پسند و کاربردی
مقاله ساخت Favicon
مقاله بهترین روش یادگیری طراحی سایت
مقاله چگونه یک طراح وب و یا شرکت طراحی استخدام کنیم؟
مقاله 20 گام برای پیاده سازی یک وب سایت عالی
مقاله بهترین دوره های آنلاین طراحی سایت
مقاله استفاده از تجربه بازی های رایانه ای در طراحی وب سایت
مقاله رفع مجازات گوگل
مقاله بهترین نوع فایل تصویر برای استفاده در وب سایت چیست؟
مقاله قرار دادن نقشه گوگل در سایت و شخصی سازی آن
مقاله نام و کد هگزا دسیمال رنگ ها برای استفاده در برنامه نویسی وب سایت
مقاله 10 اشتباه مهلک در طراحی سایت
مقاله کاربرد css در طراحی سایت
مقاله عوامل موثر در کیفیت طراحی سایت
مقاله ترکیب html و css در طراحی سایت
مقاله شغل های همگام با طراحی سایت
مقاله تفاوت وب سایت و وب پورتال
مقاله معایب پارالاکس در طراحی سایت
مقاله طراحی سایت اپن کارت
مقاله تم کلی طراحی سایت در سال 2016-2017 : تمایز
مقاله روند بد منظر در طراحی سایت 2016
مقاله طراحی سایت فروشگاهی بر پایه پرستاشاپ
مقاله ایجاد افکت سه بعدی در طراحی سایت
مقاله مقایسه طراحی سایت اپن کارت و پرستاشاپ
مقاله XSLT در طراحی سایت
مقاله نکاتی برای شروع طراحی سایت
مقاله راه های ایندکس کردن صفحات وب سایت توسط گوگل
مقاله چه عواملی به طراحی سایت اعتبار می بخشد؟
مقاله کیدل : موتور جستجو مناسب برای کودکان
مقاله 20 فونت برتر برای استفاده در طراحی سایت
مقاله مثال هایی از طراحی سایت آزار دهنده
مقاله 7 قانون در طراحی سایت موثر
مقاله 5 ابزار طراحی سایت جدید در سال 2016
مقاله عوامل تعیین کننده هزینه طراحی سایت
مقاله در شرکت طراحی سایت مبنا از چه تکنولوژی هایی برای طراحی سایت استفاده می شود؟
مقاله ابزار AMP چیست؟
مقاله نکاتی برای تبدیل شدن به یک استاد طراحی سایت
مقاله ساخت و طراحی سایت در گوگل
مقاله صفر تا صد طراحی سایت
مقاله طراحی سایت وردپرس
مقاله طراحی سایت تک صفحه ای
مقاله نرم افزار طراحی سایت
مقاله طراحی سایت فلت
مقاله هنگام طراحی سایت جدید از چهار اشتباه ساده طراحی سایت اجتناب کنید
مقاله معرفی کتاب طراحی سایت واکنش گرا و تطبیقی
مقاله علائم نیاز به طراحی سایت جدید
مقاله نکاتی مفید برای طراحی سایت جدید
مقاله تفاوت UX و UI در طراحی سایت
مقاله آنچه که باید در طراحی سایت بدانید
مقاله به منظور افزایش امنیت طراحی سایت چه باید کرد
مقاله تاثیر بلاگ در طراحی سایت
مقاله چگونه هزینه طراحی سایت را کاهش دهیم
مقاله نقش ویدئو در طراحی سایت
مقاله اصول طراحی صفحه بندی سایت
مقاله الگوریتم Rank Brain
مقاله طراحی سایت مستقل
مقاله مقایسه طراحی تخت و متریال دیزاین در طراحی سایت
مقاله روند طراحی سایت در سال 2017
مقاله 5 روش جدید در طراحی سایت در سال 2017
مقاله نکات روانشناسی ساده در طراحی سایت
مقاله اینفوگرافیک طراحی سایت رسپانسیو چیست
مقاله مقایسه فریم ورک بوت استرپ با متریال دیزاین
مقاله طراحی سایت بر مبنای احساسات
مقاله طراحی سایت سئو محور
مقاله فضای منفی در طراحی سایت
مقاله باید ها و نباید ها در طراحی سایت
مقاله درطراحی سایت از رنگ سبز طبیعی استفاده کنید
مقاله طراحی فروشگاه اینترنتی مناسب چه افرادی است؟
مقاله تاثیر طراحی فروشگاه اینترنتی در کسب در آمد
مقاله طراحی فروشگاه اینترنتی اختصاصی