افزونه طراحی سایت فایر فاکس (قسمت دوم)

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

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

افزونه طراحی وب سایت Javascript Deobfuscator

این افزونه همانطور که از نامش پیداست برای توسعه دهندگان جاوا اسکریپت مناسب است.به شما امکان مشاهده ی کدهای جاوا اسکریپت و بررسی آنها را در هر سایتی میدهد.

افزونه طراحی وب سایت افزونه MeasureIt

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

افزونه طراحی وب سایت Wappalyzer

زمانی که شما به یک وبسایت نگاه میکنید متوجه نخواهید شد که دقیقا از چه افزونه هایی استفاده کرده است. اما با کمک این افزونه میتوانید تمامی بک گراند یک وب سایت را مشاهده کنید.

افزونه طراحی وب سایت افزونه Greasemonkey

این افزونه امکانات پیشرفته تر سفارشی کردن مرورگر را با اجرای کد های جاو اسکریپتی که باعث تغییر در نحوه نمایش وب سایت می شوند به ارمغان می آورد. صدها کد متنی در دسترس هستند و بسیاری از آنها مناسب وب سایت های ویژه هستند.

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

 افزونه طراحی وب سایت HttpFox

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

افزونه طراحی وب سایت افزونه View Source Chart

هنگامی که شما با استفاده از ابزارهای معمول فایرفاکس به فایلهای سورس ( منبع ) یک صفحه وب نگاه می کنید شما احتمالا با متن حجیم و نامرتبی از کد ها و حروف مواجه می شوید که جستجو و یافتن هر چیزی در این وضعیت کار آسانی نیست. این افزونه به طور هوشمند کد های سورس یک صفحه وب را به شکل یک مجموعه مرتب شده نمایش داده و به شکل بصری مرز بین برچسب ها ( tag boundaries ) و ساختارهای DOM را نشان می دهد بنابراین شما به سادگی می توانید بین کد های سورس بدون هر گونه سردرگمی حرکت کنید.

افزونه طراحی وب سایت WordPress Code Reference

شما با افزودن این افزونه فایرفاکس در وردپرس میتوانید یک مرجع کامل از عملگرها ، هوک ها وکلاس ها داشته باشیدوهر زمان که بخواهید از میان آن جستجوی خود را انجام دهید.

افزونه طراحی وب سایت افزونه Aardvark

دهمین و آخرین افزونه لیست ما برای انتخاب کردن اشیا و اجرای هرگونه انتخاب کارکردهای گسترده انها در صفحه وب هست. شما تنها بر روی شی مورد نظر کلیک کرده و یکی از کلید های میانبر صفحه کلید فشار دهید. برخی از مثالها عبارتند از فشار کلید R که موجب حذف شی می شود.کلید W برای پهن تر کردن شی. کلید I برای جدا کردن شی از بقیه اشیای صفحه.کلید V برای مشاهده سورس شی. نهایتا فشار کلید H راهنما را برای شما آشکار می کند که می توانید لیستی از تمامی ۱۴ کلید میانبر را مشاهده و از آنها استفاده نمایید.

افزونه طراحی وب سایت  Firebug

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

با استفاده از این ابزار جدای از کار دیباگ کردن می توانید کارهای زیر را انجام دهید :

• مشاهده و تغییر در برگه هایی که از HTML , CSS و جاوا اسکریپت استفاده می کنند.
• مشاهده ویژگی های هر المنت با انجام کلیک راست روی آن المنت و انتخاب گزینه Inspect .
• اضافه کردن نقطه شکست به برگه ها ! این کار زمانی انجام می شود که شما بخواهید تنها بخشی از وبسایت را دیباگ کنید.
• نمایش درختی DOM
• نمایش زمان دانلود ، bottlenecks و سربرگ های HTTP

جدای از این موارد یک محیط دیباگ برای کدهای جاوا اسکریپت به صورت Console را داراست.

افزونه طراحی وب سایت  Save Complete

خیلی از اوقات می خواهیم عملیات دیباگ کردن یک صفحه وبسایت را سریع تر انجام دهیم. می دانم که Firebug and و Web Developer برای این کار مناسب هستند ولی مشکلی که وجود دارد این است که صرفا می توانیم پیشنمایش کدها را در فایرفاکس مشاهده کنم. افزونه Save Complete را نصب کنید.

با  استفاده از این افزونه می توانید کل وبسایت همراه با کدهای سی اس اس و جاوا اسکریپت آن را دانلود کنید و در حالت لوکال از آن استفاده کنید. مهمترین نکته در این حالت این است که عملیات دیباگ شما ماندگار می ماند و می توانید وبسایت را با هر مرورگر دیگری نیز نگاه بیاندازید. همانطور که گفته شد این افزونه وبسایت را به صورت کامل دانلود می کند و بهتر از خود گزینه Save as… مرورگر عمل می کند.

افزونه ها و طراحی وب سایت

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

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