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

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

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

افزونه firebug که برای مرورگر فایرفاکس طراحی و تولید شده است، فرآیند debug کردن و ویرایش کدهای وب سایت را به شدت تسریع می کند به نحوی که شما در همان صفحه مرورگر می توانید کدهای html و css و جاوا اسکریپت خود را ویرایش کنید و در پایان اگر به نتیجه مطلوب رسیدید، آن کدها را جایگزین کدهای قبلی در صفحه سایت خود بکنید.

آنچه در این فیلم آموزشی خواهید آموخت :

  • آموزش کار با افزونه firebug
  • نحوه یافتن عنصر مورد نظر در کدهای html در صفحات وب با پلاگین firebug
  • نحوه ویرایش و inspect کردن کدهای css و html با firebug
  • نحوه ی enable و disable کردن عناصر و مشخصه های صفحات وب
  • نحوه ی اضافه و حذف کردن عناصر و مشخصه ها در صفحات وب با firebug
  • بیان کاربردهای افزونه firebug

لازم به ذکر است که در فیلم آموزشی بررسی گزینه ی inspect element برای کدهای html در فایرفاکس به معرفی این امکان پیش فرض در مرورگر Mozilla Firefox که نیاز به نصب پلاگین firebug ندارد، پرداختیم.

دانلود افزونه firebug

[hdplay id=39]

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

[free_vip]
[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/firebug-inspecting-codes.mp4′]دانلود فیلم آموزش استفاده از افزونه firebug در مرورگر فایرفاکس برای طراحان وب[/video_download]
[/free_vip]

دسترسی سریع :

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

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

گاهی اوقات ما برای جنبه آموزشی یا debug کردن کدها و یا دیدن چگونگی تفسیر کدها توسط مرورگر، نیاز داریم که کدهای خود را inspect کنیم. هر مرورگر ابزارهایی (پلاگین) دارد که می توانید با نصب آن plugin، امکانات آن مرورگر را افزایش دهید. برای مرورگر فایرفاکس، معروفترین پلاگین برای inspect کردن کدها، افزونه firebug می باشد.

نصب افزونه firebug :

برای نصب این افزونه می توانید با استفاده از منوی بالای مرورگر tools و کلیک بر روی گزینه add-ons، این افزونه را جستجو کرده و سپس نصب کنید.Array Array

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

Array

برای مشاهده کدها می توانید بر روی قسمتی که می خواهید کلیک راست کرده و سپس inspect element with firebug را انتخاب کنید.

توجه کنید که با دکمه F12 صفحه کلید نیز میتوانید این کار را انجام دهید.

Array

اکنون روی هر کد که برویم علاوه بر منطقه ای که در صفحه وب دربرگرفته است کدهای Css آن را در سمت راست می بینیم.

Array

در قسمت سمت راست، کدهای css را می بینید که کنار آن، آدرس دقیق هر کد نشان داده شده است. علاوه بر آن با کلیک روی آدرس آن فایل css نمایش داده میشود.

Array

در این محیط می توانید براحتی کد های خود را تغیر دهید و مشکلات آن ها را برطرف کنید. ( با کلیک روی هر استایل با کلید tab می توانید جا به جا شوید.)

می توانید با رفتن روی هر استایل و کلیک بر روی علامت ممنوع کنار آن، استایل را فعال و یا غیر فعال کنید.

Array

 

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

در قسمت layout در سمت راست، box model عنصر نشان داده میشود.

در تب console در سمت چپ میتوان خطا یا پیغام و یا هشدار خاصی که بعد از تفسیر کدها ایجاد میشود را مشاهده کرد.

با حرکت موس فضای اشغال شده هر عنصر را میتوانید ببینید و با کلیک روی آن css و html اش در پایین مشخص می شود.

وقتی روی عنصری می رویم، در صفحه وب آن را برای ما هایلایت می کند. ( فضای زرد نشان دهنده margin در css – فضای بنفش نشان دهنده padding در css – فضای آبی نشان دهنده ارتفاع و عرض آن عنصر)

با راست کلیک روی عنصرها در سمت چپ می توان آن عنصر را حذف یا ویرایش کرد. (edit element – edit html)

Array Array

در سمت چپ و راست با کلیک راست روی عنصر و انتخاب گزینه new attribute و یا new property صفت در html یا مشخصه در css را می توانید اضافه کنید.

Array Array

توجه کنید که تغییراتی که در firebug میدهید دائمی نیستند و با یک refresh به حالت اولیه باز می گردند.

کاربرد کلی inspect کردن برای افزایش سرعت debug و همچنین افزایش سرعت یادگیری می باشد.

دسترسی سریع :

دیدگاه خود را برای ما ارسال کنید

9 Comments
  1. Pingback: آموزش html | آموزش استفاده از افزونه پرکاربرد Web Developer در فایرفاکس

    • GH
    • ۱۳۹۳-۰۴-۰۵
    پاسخ

    با سلام
    آموزش ها خیلی روان و قابل فهم بیان شدن
    واقعا ممنونم
    یک خواهش دارم: میشه آموزش ساخت یک ویدئو پلیر مثل همینی که تو سایت خودتون هست بزارید؟

      • گروه طراحی سایت
      • ۱۳۹۳-۰۴-۰۵
      پاسخ

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

        • shahoo
        • ۱۳۹۳-۰۴-۰۵
        پاسخ

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

      • داوود
      • ۱۳۹۴-۰۴-۲۵
      پاسخ

      با سلام؛ آقای مهندس امکان داره Inspector فایرفاکس نتیجه متفاوتی رو با firebug نشون بده؟؟ آخه من یه کد نوشتم که دقیقا مشابه هستش ولی هر کدوم متفاوت نشون میدن! بطور مثال با فایرفاکس که نگاه میکنم padding اعمال شده توسط body به کلیه اطراف تگ های من اعمال شده ولی توسط firebug که میبینم اینطور نیست.
      سلام استاد عزیزم؛
      من اومدم و خاصیت clear رو که حدس میزدم از اون باشه برداشتم الان تو هر دو تا درست شد. میدونید چی حدس میزنم؟با خودم میگم شاید مرورگر خودش میاد و این احتمالا نقص من رو پوشش میده ولی firebug نه!! بهرحال جالب بود برام و میخواستم شما هم در جریان کار قرار بگیرین و اینکه ممکنه گاهی اوقات با همدیگه یکی نباشه نتایج این inspector ها.
      ۱- تصویر شماره ۱- با Inspector مرورگر فایرفاکس:
      http://s3.picofile.com/file/8200379176/1_with_firefox_inspector.jpg
      2- تصویر شماره ۲- با استفاده از افزونه firebug:
      http://s3.picofile.com/file/8200379226/2_with_firebug.jpg

        • گروه آموزش طراحی سایت
        • ۱۳۹۴-۰۴-۲۵
        پاسخ

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

      • عليزاده
      • ۱۳۹۴-۱۲-۱۰
      پاسخ

      سلام
      شرکتی قالب زیر رو برام طراحی کرده. منتهی خودشون کلی قالب پیش فرض دارن.
      techtest.ewaus.ir
      فقط وقتی در قالب بالا در قسمتی از صفحه راست کلیک می کنم و سورس صفحه رو نگاه می کنم کدهای مربوط به قالبهای پیشفرض خود شرکت از جمله کد منوی بالا و … دیده میشه اما وقتی با همین افزونه کدها رو نگاه می کنم یا وقتی مثلا منوی بالا رو با ماوس به حالت انتخاب در میارم و روی قسمت انتخاب شده راست کلیک می کنم و سورس اون قسمت رو نگاه می کنم می بینم که کدهای قالب جدید نمایش داده میشه!!
      میشه بپرسم دلیلش چیه؟
      ممنون از لطفتون

        • گروه آموزش طراحی سایت
        • ۱۳۹۵-۰۱-۲۹
        پاسخ

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

      • shoaib
      • ۱۴۰۰-۰۱-۲۶
      پاسخ

      سلام دوست عزیز
      اول ممنون که اطلاعاتت رو برای همه در دسترس قرار میدین
      و بعد یک سوال دارم
      برای اینکه از طریق inspect element بخام یک تغییر رو داخل سایت خودم ذخیره کنم چکاری باید انجام بدم
      میخام برای تغییراتی در سایتم از این زوش استفاده کنم
      ایا راهی داره ؟
      ممنون میشم جواب بدین
      با تشکر
      شعیب تراب