به جرات می توان گفت طراحی وب بدون استفاده از ابزار های بررسی المنت (Inspect Element) سخت ترین کار شما خواهد بود، این ابزار های این امکان را می دهند که جزئیات بخش های مختلف صفحه وب را مشاهده کنید، آنها را ویرایش کنید، بخش های جدید خود را ایجاد کنید، نتایج کد های CSS و JavaScript را آنن مشاهده کنید و در صورتی که از کار خود راضی بودید در نهایت آنها را بصورت فایل در بیاورید.
فرض کنید می خواهید قالبی را که برای وبلاگ خود انتخاب کرده اید تغییر داده و مطابق میل خود کنید، راحتترین راه برای این کار استفاده از ابزارهای بررسی است، شما می توانید براحتی بخش های مختلف را دست کاری کنید بدون اینکه نگران خرابی باشید، زیرا تمام تغییرات شما ظاهری بوده و در اصل فایل ها تغییری ایجاد نمی شود. یکی از مشهورترین این نرم افزار های Firebug است که می توان آن را بروی اکثر مرورگرها نصب کرد، البته امروزه اکثر مرورگر های خود ابزار بررسی خود را دارند ولی داشتن ابزاری واحد روی مرورگر های مختلف توانایی شما را بالا می برد.

firefox add-ons search
در زیر نحوه نصب آن در فایرفاکس و توضیحی کوتاه برای استفاده از آن را بیان می کنیم. در Firefox از منوی Tools گزینه Add-ons را انتخاب کنید و در نوار جست جوی سمت راست عبارت Firebug را وارد کنید.
firefox add-ons search
در لیست افزونه های نمایش داده شده Firebug را پیدا کنید (آیکون این افزونه عکس یک کفش دوزک است) و روی Install کلیک کنید. براحتی Firebug دانلود و نصب می شود.
firefox add-ons search
فایرفاکس را بسته و دوباره اجرا کنید، یکی از قدرتمندترین ابزار های طراحی وب را در اختیار دارید. برای شروع به کار در صفحه کلیک راست کنید و گزینه Inspect Element with Firebug را انتخاب کنید، در زیر صفحه مرورگر بخشی ظاهر می شود که پنجره اصلی است.
firefox add-ons search
بخش های مختلف این کادر را با هم بررسی می کنیم.
firefox add-ons search
بخش ۱: کد اصلی صفحه وب در این بخش قابل نمایش است، می توانید محتوا یا تگ های صفحه را ویراش کنید یا آنها را کم و زیاد کنید. بخش ۲: در این بخش استایل ها و کد های CSS صفحه را نمایش می دهد، با انتخاب هر یک از تگ های صفحه در بخش ۱ تمامی استایل و کدهای CSS مربوط به آن تگ در این بخش نمایش داده می شوند، می توانید مقدار آنها را تغییر دهید یا کد های جدید به آن بیافزایید. بخش ۳: اگر دنبال متن یا ویژگی خاصی در صفحه هستید، در این بخش آن را جست جو کنید. بخش ۴: در این نوار بخش های مختلف Firebug که بصورت پیش فرض بخش HTML قرار دارد. در بخش CSS می توانید محتوای فایل های سی اس اس مربوط به صفحه را مشاهده کنید و در بخش Script محتوای فایل های جاوا اسکریپت نمایش داده می شود. همچنین در بخش Console نیز می توانید کدهای جاوااسکریپت خود را نوشته و اجرا کنید. بخش ۵: این بخش سلسله مراتب تگی که انتخاب کردیم را نمایش می دهد، برای مثال اگر روی تگ body کلیک کرده در این بخش دو تگ html و body نمایش داده می شود.

با اجرای یک مثال ساده نحوه کار را نمایش می دهیم.
در تصویر زیر می خواهیم رنگ و اندازه متن مشخص شده را تغییر دهیم، برای این کار در بخش شماره ۴ بروی علامت اشاره گر موس کلیل کنید، بکمک این ابزار می توانید المنت مورد نظر خود را انتخاب کرده و کد آن را بررسی کنید.

firefox add-ons search
پس از انتخاب این گزینه اشاره گر را هرجای صفحه که ببرید کد مربوط به آن در کادر فایرباگ نمایش داده می شود، اشاره گر را روی مکان مورد نظر برده و روی آن کلیک کنید.
firefox add-ons search
در بخش ۲ کد CSS مربوطه را مشاهده می کنید، و همانطور که در بخش ۱ میبینید اسم کلاس مربوط به این تگ meta می باشد، پس برای تغییر در این ظاهر این تک می توانید کد های موجود در این کلاس را ویرایش کنیم. در تصویر زیر نمای بزرگتری از بخش ۲ را مشاهده می کنید.
firefox add-ons search
همانطور که در تصویر مشاهده می کنیم و انتظارش را نیز داشتیم در بخش ۲ کد کلاس meta نمایش داده شده است. در جلوی نام کلاس متا همانطور که در تصویر مشاهده می کنید عبارت style.css?h (line 426) نوشته شده است به این معنی که کد این کلاسد در فایل style.css و در سطر ۴۲۶ نوشته شده است و برای تغییر در فایل می بایست به آنجا مراجعه کنید. خب همانطور که مشاهده می کنید اندازه متن در این کلاس(font-size) برابر با ۱۳ می باشد ،برای بزرگتر کردن آن کافی است اندازه را افزایش دهیم. ولی کدی برای رنگ متن در این کلاس نوشته نشده است برای مثال رنگ متن را قرمز (#F00) قرار می دهیم. یعنی کد ``` color:#f00; ``` را یا این کلاس می افزاییم وهمانطور که در زیر مشاهده می کنید رنگ و اندازه متن در کادر مورد نظر ما تغییر کرده است. ولی همواره دقت داشته باشید تغییراتی که اعمال می کنید صرفا جهت مشاهده است و برای اینکه واقعا تغییرات اعمال شوند باید همین تغییرات خود را به فایل ها منتقل کنید.
firefox add-ons search

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