رفع ايراد طراحي در سه‌سوت! (معرفی افزونه فایرباگ-Firebug)

[mohsenilloveyou 13]

[align=JUSTIFY]سلام. در مورد فایرباگ جستجویی در انجمن انجام دادم و دیدم که مطلب وجود ندارد. خلاصه حیفمان آمد که کاربران جومینا از این افزونه بی نصیب بمانند. مطالبی از سراسر وب راجع به این افزونه ی بسیار کاربردی را برایتان تهیه و همینجا گذاشته ام که امیدوارتان برایتان مفید واقع شود.:heart:

[/align][align=JUSTIFY]

منبع: کلیک جام جم مورخ:15 اسفند 89

[/align][JUSTIFY]طراحي استاندارد وب، خصوصا براي نمايش يكسان وب‌سايت در مرورگرهاي معروف، كار بسيار طاقت‌فرسا و زمانبري است. افزونه فايرباگ كه براي موزيلا فايرفاكس ايجاد شده است، براي رفع همين مشكل به‌وجود آمده و به‌كمك آن مي‌توان به‌صورت بلادرنگ، تغييرات را در يك وب‌سايت ايجاد كرد و نتيجه را همانجا مشاهده كرد. براي استفاده از اين افزونه خوب، به نشاني زير برويد: [/JUSTIFY][align=CENTER][align=LEFT]

http://getfirebug.com[/align][align=RIGHT]

اطلاعات بیشتر راجع به فایرباگ:

mall">مقاله شماره ۲ طراحی وب

mall"> Firebug یک افزونه فایرفاکس کاملا ضروری برای طراحان وبmall"> 

نوشته شده توسط مهدی باقری در بخش طراحی وب در تاریخ ۲۷ بهمن ۱۳۸۸

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

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[/align] [align=JUSTIFY]ترجمه این عبارت :[/align] [align=JUSTIFY]فایرباگ به فایرفاکس اضافه می شود و ابزارهای بسیار مفیدی برای طراحی و توسعه وب در دسترس شما قرار می دهد. شما همزمان با مرور یک سایت در مرورگر خود می توانید کد های HTML و CSS و Javascript آن را به طور کاملا زنده ویرایش و یا عیب یابی کنید.[/align] [align=JUSTIFY] [/align] [align=JUSTIFY]در ادامه به معرفی مختصر این ابزار مفید به نقل از سایت رسمی آن می پردازیم.[/align] [align=JUSTIFY] [/align][align=JUSTIFY]همانطور که دوستش دارید : [/align][align=JUSTIFY]فایرباگ تنها با فشردن یک دکمه کوچک که در گوشه پایینی سمت راست مرورگر شما قرار می گیرد فعال می شود. اما به هیچ وجه مزاحم کار شما نمی شود. شما می توانید آن را در یک پنجره کاملا جدید باز کنید و یا به صورت نواری به انتهای مرورگر خود آن را بچسبانید. در شکل زیر نحوه فعال سازی فایرباگ را مشاهده می کنید :[/align] [align=JUSTIFY] [/align][align=CENTER]

[/align][align=JUSTIFY]ویرایش و جزء یابی کد HTML :[/align] [align=JUSTIFY]شما با کمک یکی از ویژگی های جذاب فایر باگ می توانید کد مربوط به هر المنتی که در صفحه مشاهده می کنید را پیدا کنید. تنها کافی است که این ویژگی را فعال کنید و با موس روی المنت مورد نظرتان کلیک کنید. فایر باگ در پنجره جداگانه ای، کد مربوط به آن را نمایش می دهد.[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]در صورتی که قصد ایجاد تغییری در کد HTML صفحه وبی که در مرورگر باز است دارید به راحتی با فایرباگ این کار امکان پذیر است. کافی است که کد مربوطه را با کمک ویژگی inspect و یا به طور دستی پیدا کنید و سپس به صورت زنده آن را تغییر دهید. دقت کنید که شما کد هر سایتی را می توانید تغییر دهید. حتی کد سایت Yahoo را. چون فایر باگ کد ها را به صورت موقت و روی کامپیوتر شما تغییر میدهد. این یک ویژگی بسیار مفید است و می توانید در کد سایت های مختلف دست ببرید![/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]یکی دیگر از ویژگی های جالب Firebug ویرایش کد CSS به صورت زنده است. هر عضوی در صفحه را که شما انتخاب کنید فایرباگ استایل های اعمال شده روی آن را به شما نمایش می دهد و شما می توانید این استایل ها را به صورت زنده ویرایش کنید و نتیجه را ببینید.[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]اگر در حال یادگیری CSS هستید دو ویژگی که در ادامه معرفی می شود کمک زیادی به یادگیری شما می کند. هنگامی که در حال ویرایش کد CSS هستید با زدن کلید های بالا و پایین می توانید کلیه مقادیر ممکن برای یک ویژگی را به ترتیب حروف الفبا ببینید :[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]همچنین می توانید هر استایلی را که تمایل دارید فعال یا غیر فعال کنید. بدین ترتیب می توانید اثری که هر استایل روی اجزای تشکیل دهنده صفحه وب می گذارد را به خوبی مشاهده کنید.[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]یکی از ویژگی های جالب Firebug نمایش Box Model هر عضو به صورت تصویری است. به کمک این ویژگی می توانید دلیل تغییر اندازه اجزا را به خوبی متوجه شوید. این ویژگی با کمک خط کش و خطوط راهنما طول و عرض و مرز و مارجین و پدینگ را به زیبایی به نمایش می گذارد.[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]این ها ویژگی های بسیار مفیدی از فایرباگ بود که برای طراحان مبتدی استفاده بیشتری دارد. اما توانایی های فایر باگ به اینجا ختم نمی شود. در ادامه لیستس از سایر قابلیت های فایر باگ را مشاهده می کنید :

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[/align] [align=JUSTIFY]ترجمه این عبارت :[/align] [align=JUSTIFY]فایرباگ به فایرفاکس اضافه می شود و ابزارهای بسیار مفیدی برای طراحی و توسعه وب در دسترس شما قرار می دهد. شما همزمان با مرور یک سایت در مرورگر خود می توانید کد های HTML و CSS و Javascript آن را به طور کاملا زنده ویرایش و یا عیب یابی کنید.[/align] [align=JUSTIFY] [/align] [align=JUSTIFY]در ادامه به معرفی مختصر این ابزار مفید به نقل از سایت رسمی آن می پردازیم.[/align] [align=JUSTIFY] [/align][align=JUSTIFY]همانطور که دوستش دارید : [/align][align=JUSTIFY]فایرباگ تنها با فشردن یک دکمه کوچک که در گوشه پایینی سمت راست مرورگر شما قرار می گیرد فعال می شود. اما به هیچ وجه مزاحم کار شما نمی شود. شما می توانید آن را در یک پنجره کاملا جدید باز کنید و یا به صورت نواری به انتهای مرورگر خود آن را بچسبانید. در شکل زیر نحوه فعال سازی فایرباگ را مشاهده می کنید :[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=JUSTIFY]ویرایش و جزء یابی کد HTML :[/align] [align=JUSTIFY]شما با کمک یکی از ویژگی های جذاب فایر باگ می توانید کد مربوط به هر المنتی که در صفحه مشاهده می کنید را پیدا کنید. تنها کافی است که این ویژگی را فعال کنید و با موس روی المنت مورد نظرتان کلیک کنید. فایر باگ در پنجره جداگانه ای، کد مربوط به آن را نمایش می دهد.[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]در صورتی که قصد ایجاد تغییری در کد HTML صفحه وبی که در مرورگر باز است دارید به راحتی با فایرباگ این کار امکان پذیر است. کافی است که کد مربوطه را با کمک ویژگی inspect و یا به طور دستی پیدا کنید و سپس به صورت زنده آن را تغییر دهید. دقت کنید که شما کد هر سایتی را می توانید تغییر دهید. حتی کد سایت Yahoo را. چون فایر باگ کد ها را به صورت موقت و روی کامپیوتر شما تغییر میدهد. این یک ویژگی بسیار مفید است و می توانید در کد سایت های مختلف دست ببرید![/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]یکی دیگر از ویژگی های جالب Firebug ویرایش کد CSS به صورت زنده است. هر عضوی در صفحه را که شما انتخاب کنید فایرباگ استایل های اعمال شده روی آن را به شما نمایش می دهد و شما می توانید این استایل ها را به صورت زنده ویرایش کنید و نتیجه را ببینید.[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]اگر در حال یادگیری CSS هستید دو ویژگی که در ادامه معرفی می شود کمک زیادی به یادگیری شما می کند. هنگامی که در حال ویرایش کد CSS هستید با زدن کلید های بالا و پایین می توانید کلیه مقادیر ممکن برای یک ویژگی را به ترتیب حروف الفبا ببینید :[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]همچنین می توانید هر استایلی را که تمایل دارید فعال یا غیر فعال کنید. بدین ترتیب می توانید اثری که هر استایل روی اجزای تشکیل دهنده صفحه وب می گذارد را به خوبی مشاهده کنید.[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]یکی از ویژگی های جالب Firebug نمایش Box Model هر عضو به صورت تصویری است. به کمک این ویژگی می توانید دلیل تغییر اندازه اجزا را به خوبی متوجه شوید. این ویژگی با کمک خط کش و خطوط راهنما طول و عرض و مرز و مارجین و پدینگ را به زیبایی به نمایش می گذارد.[/align] [align=JUSTIFY] [/align][align=CENTER][/align][align=CENTER] [/align][align=JUSTIFY]

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

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

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

[JUSTIFY]فایرباگ یک افزونه کاملا رایگان است و حتی شما می توانید سورس آن را تغییر دهید. برای اطلاعات بیشتر در مورد فایر باگ می توانید به سایت رسمی آن مراجعه کنید. برای نصب این افزونه روی فایر فاکس، از طریق فایرفاکس این لینک را باز کنید و مراحل نصب را تا انتها دنبال کنید.[/align]لینک اصلی مطلب: http://tuts.ir/?p=966 [/align][/JUSTIFY]فایرباگ یک افزونه کاملا رایگان است و حتی شما می توانید سورس آن را تغییر دهید. برای اطلاعات بیشتر در مورد فایر باگ می توانید به سایت رسمی آن مراجعه کنید. برای نصب این افزونه روی فایر فاکس، از طریق فایرفاکس این لینک را باز کنید و مراحل نصب را تا انتها دنبال کنید.[/align]لینک اصلی مطلب: http://tuts.ir/?p=966