sina salehifard 27 اردیبهشت 1393 8 8665 بازدید آموزش HTML
فیلم آموزش استفاده از افزونه firebug در مرورگر فایرفاکس برای طراحان وب

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

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

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

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

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

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

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

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

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

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

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

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

نصب افزونه firebug :

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

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

firebug-3

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

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

firebug-4

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

firebug-5

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

firebug-6

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

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

firebug-7

 

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

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

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

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

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

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

firebug-8 firebug-9

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

firebug-10 firebug-11

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

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

دسترسی سریع :

نظرات کاربران (8)




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

    • گروه آموزش طراحی سایت

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

  2. داوود

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

    • گروه آموزش طراحی سایت

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

  3. GH

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

    • گروه طراحی سایت

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

      • shahoo

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