امتیاز دهید:

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

آشنایی با منوی addson در فایرفاکس

همانطور که در تصویر فوق مشخص است، پس از ورود به منوی اصلی مرورگر فایرفاکس، روی گزینه Add-ons کلیک می کنیم:

فایرباگ در مرورگر فایرفاکس

همانطور که در تصویر فوق مشخص است، در بخش جستجوی صفحه فوق عبارت firebug را تایپ کرده و دکمه اینتر را فشار می دهیم:

نصب فایرباگ روی فایرفاکس

می بینیم که فایرفاکس این پلاگین را پیدا نموده و در این مرحله به سادگی می توانیم روی گزینه Install کلیک کرده تا این پلاگین را روی مرورگر خود نصب کنیم:

آیکان فایرباگ روی فایرفاکس

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

پیش از ادامه کار نیاز است تا یک تگ <P> حاوی عبارت This is a paragraph داخل سند اچ تی ام ال (HTML) خود ایجاد نماییم تا بهتر بتوان عملکرد پلاگین Firebug را مشاهده نمود:

تست کردن پلاگین فایرباگ

 اکنون روی عکس حشره کلیک می کنیم:

اجرای فایرباگ در مرورگر فایرفاکس

می بینیم که در پایین مرورگر پنجره ای به صورت فوق نمایان می شود. در حقیقت وظیفه ای که این پنجره دارد این است که Source Code یا همان کدهای اچ تی ام ال (HTML) صفحات وب را به برنامه نویس نمایش دهد. همانطور که در پنجره سمت راست می بینیم، بخش های اصلی یک سند اچ تی ام ال (HTML) که عبارتند از html, head, body به نمایش در آمده اند و چنانچه روی علامت به علاوه کنار مثلا body کلیک کنیم، کلیه عناصر قرار گرفته در body این صفحه از سایت برای ما به نمایش در خواهد آمد.
خصوصیت بسیار جذاب دیگری که این پلاگین دارد این است که می توانیم به صورت دینامیک کد مربوط به بخش های مختلف یک سند را بیابیم. برای این منظور به شکل زیر عمل می کنیم:

نمایش دینامیک عناصر روی فایرباگ در فایرفاکس

همانطور که در تصویر فوق مشخص است، روی گزینه ای که عکس نشانگر موس روی آن قرار گرفته است یک بار کلیک می کنیم تا فعال شود. از این پس با قرار دادن نشانگر موس خود روی عناصر قرار گرفته روی یک صفحه از سایت، در پنجره مرتبط با Source Code کدهای آن آیتم به نمایش در خواهد آمد. برای روشن شدن این مطلب همانطور که در تصویر زیر خواهیم دید نشانگر موس خود را روی عبارت This is a paragraph قرار می دهیم:

استفاده از فایرباگ برای نمایش عناصر روی صفحه

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


نظرات
نظرات
  • بهزاد مرادی :

    سلام،
    ممنون از راهنمایی شما. بله حق با شما است.


    با تشکر فراوان
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/05/19 07:41:54
  • mnr73 :

    با سلام دوباره و خسته نباشید خدمت شما...
    فقط میخواستم بگم که این قابلیت در کروم هم وجود داره که با فشردن کلید F12 فعال و غیر فعال میشه...


    1393/05/17 16:42:36