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

یکی از مرورگرهایی که در این چند سال اخیر به شدت مورد استفاده طراحان و توسعه دهندگان قرار گرفته است مرورگر گوگل کروم هست. فایرفاکس بدلیل قدیمی بودنش طرفداران و محبوبیت زیادی دارد، اما در سال‌های اخیر گوگل کروم بدلیل سرعت بالاتر و ابزارهایی که برای طراحان و توسعه‌دهندگان وب در نظر گرفته است بسیار محبوب شده و همین موضوع باعث شده که افزونه‌های (extensions) زیادی توسعه داده شوند و روز به روز هم به تعداد آنها اضافه شود.

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

پلاگین های کروم مورد نیاز طراحان

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

۱- افزونه CSS-Shark :

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

افزونه CSS-Shark

۲- افزونه Marmoset :

این افزونه از کدهای شما اسکرین‌شات می‌گیرد که می‌توانید از آن تصاویر در سایت‌های خود استفاده کنید. همچنین می‌توانید از themeهای مختلف برای ظاهر و رنگ‌بندی کدهای خود استفاده کنید.

 افزونه Marmoset

۳- افزونه iMacros for Chrome :

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

افزونه iMacros for Chrome

۴- افزونه Font Playground :

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

افزونه Font Playground

۵- افزونه Window Resizer :

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

افزونه Window Resizer

۶- افزونه Project Naptha :

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

افزونه Project Naptha

۷- افزونه What Font :

حتما برایتان پیش آمده که به وب‌سایتی مراجعه می‌کنید و فونت‌های جالبی در آن می‌بینید و می‌خواهید شما هم از همان فونت‌ها در سایت خودتان استفاده کنید ولی نمی‌دانید نام آن فونت‌ها چیست. برای اینکار شما می‌توانید از این افزونه استفاده کنید. افزونه What Font به شما نام فونتی که در سایت استفاده شده است را نمایش خواهد داد.

افزونه What Font

۸- افزونه Yslow :

این افزونه نه تنها سرعت صفحات وب‌سایت شما را بررسی و اعلام می‌کند بلکه راهکارهایی برای بهینه‌سازی صفحات به شما ارائه خواهد داد. این افزونه که توسط تیم توسعه‌دهنده Yahoo توسعه داده شده است، در بهینه‌سازی سرعت و بازدهی صفحات وب‌سایت به شما خیلی کمک خواهد کرد.

افزونه Yslow

۹- افزونه Web Developer :

اگر این افزونه را نمی‌شناسید، به عنوان یک توسعه‌دهنده وب تا بحال از خودتون پرسیدید که چطوری بدون این افزونه کار کردید و زنده‌اید ؟ laugh این افزونه با اضافه کردن یک کلید در کروم شما کلی امکانات و ابزار برای توسعه‌وب به شما خواهد داد.

افزونه Web Developer

۱۰- افزونه Page Ruler :

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

افزونه Page Ruler

۱۱- افزونه Web Developer checklist :

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

افزونه Web Developer checklist

۱۲- افزونه DevTools Autosave :

این افزونه به شما این امکان را می‌دهد که تغییراتی که در CSS و JS صفحات خود می‌دهید را مستقیما بر روی فایل اصلی آن ذخیره کند و در نتیجه باعث بالا رفتن سرعت توسعه سایت خواهد شد.

افزونه DevTools Autosave

۱۳- افزونه Instant Wireframe :

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

 افزونه Instant Wireframe

۱۴- افزونه ColorZilla :

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

افزونه ColorZilla

۱۵- افزونه Ripple Emulator :

توسط این افزونه می‌توانید وب‌سایت خود را در شبیه‌ساز موبایل مشاهده کنید. این شبیه‌سازی دارای مدل‌های مختلفی است که می‌توانید سایت خود را در گوشی‌ها و ابعاد مختلف تصویر تست و بررسی کنید.
افزونه Ripple Emulator
سعی کردم در این مقاله تعدادی از پلاگین های معروف و کاربردی برای توسعه دهندگان عزیز رو معرفی کنم البته پلاگین های دیگه هم بودندمثل Wappalyzer یا پلاگین alexa ، که دیگه خیلی معروف هستند و از معرفی این ها هم صرف نظر کردم . این رو هم بگم افزونه Wappalyzer برای شناسایی cms سایت یا شناسایی سیستم مدیریت محتوای سایت و پلاگین alexa هم برای رنک الکسای سایت هست . 

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

دیدگاه کاربران

تعداد دیدگاه های کاربران : ۰ دیدگاه
هنوز دیدگاهی ارسال نشده است.


Top