منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۲۷ بهم ۱۳۸۸ در طراحی وب | ۱۵ دیدگاه

مقاله شماره ۲ طراحی وب – Firebug یک افزونه فایرفاکس کاملا ضروری برای طراحان وب

اگر طراحی وب را تازه شروع کرده اید مسلما از این پس نام فایرباگ را به کرات خواهید شنید. Firebug یک حشره موزی است که کد های HTML، CSS، Javascript و حتی PHP شما را به دقت زیر و رو می کند. البته جمله قبل یک شوخی بود! ولی به طور خلاصه فایرباگ یک افزونه بسیار مفید و سودمند برای فایرفاکس (و جدیدا برای گوگل کروم) است که از طریق آن می توانید پیشرفت چشم گیری در یادگیری طراحی وب ایجاد کنید. البته اشتباده نکنید! Firebug ابزاری برای یادگیری نیست بلکه طراحان وب حرفه ای نیز به طور مداوم از آن استفاده می کنند.

فایر باگ به نقل از سایت رسمی آن :

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page

ترجمه این عبارت :

فایرباگ به فایرفاکس اضافه می شود و ابزارهای بسیار مفیدی برای طراحی و توسعه وب در دسترس شما قرار می دهد. شما همزمان با مرور یک سایت در مرورگر خود می توانید کد های HTML و CSS و Javascript آن را به طور کاملا زنده ویرایش و یا عیب یابی کنید.

در ادامه به معرفی مختصر این ابزار مفید به نقل از سایت رسمی آن می پردازیم.

همانطور که دوستش دارید :

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

1

ویرایش و جزء یابی کد HTML :

شما با کمک یکی از ویژگی های جذاب فایر باگ می توانید کد مربوط به هر المنتی که در صفحه مشاهده می کنید را پیدا کنید. تنها کافی است که این ویژگی را فعال کنید و با موس روی المنت مورد نظرتان کلیک کنید. فایر باگ در پنجره جداگانه ای، کد مربوط به آن را نمایش می دهد.

2

در صورتی که قصد ایجاد تغییری در کد HTML صفحه وبی که در مرورگر باز است دارید به راحتی با فایرباگ این کار امکان پذیر است. کافی است که کد مربوطه را با کمک ویژگی inspect و یا به طور دستی پیدا کنید و سپس به صورت زنده آن را تغییر دهید. دقت کنید که شما کد هر سایتی را می توانید تغییر دهید. حتی کد سایت Yahoo را. چون فایر باگ کد ها را به صورت موقت و روی کامپیوتر شما تغییر میدهد. این یک ویژگی بسیار مفید است و می توانید در کد سایت های مختلف دست ببرید!

3

یکی دیگر از ویژگی های جالب Firebug ویرایش کد CSS به صورت زنده است. هر عضوی در صفحه را که شما انتخاب کنید فایرباگ استایل های اعمال شده روی آن را به شما نمایش می دهد و شما می توانید این استایل ها را به صورت زنده ویرایش کنید و نتیجه را ببینید.

4

اگر در حال یادگیری CSS هستید دو ویژگی که در ادامه معرفی می شود کمک زیادی به یادگیری شما می کند. هنگامی که در حال ویرایش کد CSS هستید با زدن کلید های بالا و پایین می توانید کلیه مقادیر ممکن برای یک ویژگی را به ترتیب حروف الفبا ببینید :

5

همچنین می توانید هر استایلی را که تمایل دارید فعال یا غیر فعال کنید. بدین ترتیب می توانید اثری که هر استایل روی اجزای تشکیل دهنده صفحه وب می گذارد را به خوبی مشاهده کنید.

6

یکی از ویژگی های جالب Firebug نمایش Box Model هر عضو به صورت تصویری است. به کمک این ویژگی می توانید دلیل تغییر اندازه اجزا را به خوبی متوجه شوید. این ویژگی با کمک خط کش و خطوط راهنما طول و عرض و مرز و مارجین و پدینگ را به زیبایی به نمایش می گذارد.

7

این ها ویژگی های بسیار مفیدی از فایرباگ بود که برای طراحان مبتدی استفاده بیشتری دارد. اما توانایی های فایر باگ به اینجا ختم نمی شود. در ادامه لیستس از سایر قابلیت های فایر باگ را مشاهده می کنید :

  • نمایش و بررسی فعالیت و مصرف پهنای باند در قسمت های مختلف یک صفحه وب
  • عیب یابی جاوااسکریپت
  • اجرای سریع جاوا اسکریپت
  • پیدا کردن سریع ایراد ها
  • مرور DOM
  • لاگ کردن جاوا اسکریپت
  • و ….

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

فایرباگ از کجا قابل دسترسی است :

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

۱۵ دیدگاه

  1. سلان چطور میشه هون لحضه تغیرات روی فایل های اصلی ذخیره کرد

  2. سلام. درود بر شما که این افزونه رو معرفی نمودید. ممنون.

  3. سلام
    تشکر
    تشکر

  4. نکته جالب توجهی بود
    کار با فایرباگ واقعاً لذبخشه
    بخاطر این مقاله ممنونم

  5. خیلی دنبالش بودم.مرسی
    به من سر بزت
    تبادلات هم میکنیم

  6. سلام میشه بگین با چی میشه سایتارو دس کاری کرد اگه بگین ممنونم بهم گفتن با کد برنر فایر باگ میشه

  7. opera این قابلیت رو بصورت embed داره،
    بدون اینکه هیچ Addon یا extension اضافی نصب بشه.

    متاسفانه توی فایرفاکس بانصب addon های اضافی مرورگر دیرتر لود میشه

  8. سلام خسته نباشید
    من این فایرباگ را چطور نصب کنم؟خواهشن زود جواب بدید.

  9. سلام
    این افزونه امکان ویرایش صفحات برای همیشه رو داره؟
    برای مثال جمله ای رو تغییر بدم و هر زمان که اون صفحه از سایت رو باز میکنم همون جمله ویرایش شده رو ببینم؟
    اگه میشه لطف آموزشش رو هم بزارید

  10. سلام دمتون گرم من تمام چت روم هارو هک کردم حتی با این برنامه میشه وبلاگ هم هک کرد ممنون هوداد هستم

  11. سلام چجوری میشه بافایرباگ چتروم هک کرد؟؟
    میشه توضیح بدید ممنون میشم؟

  12. میشه با فایر باگ امتیاز برد بالا در بازی های انلاین؟؟؟

  13. سلام فایر باگ من اخه چرا فعال نمیشه نه با روشی که شما گفتین نه با f12 و نه با روش های دیگه

  14. و تشکری از اواخر سال ۹۳

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!