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

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

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

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

۱- CSS-Shark

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

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

۲- Marmoset

افزونه های گوگل کروم برای طراحان وب

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

۳- iMacros for Chrome

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

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

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

۴- Font Playground

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

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

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

۵- Window Resizer

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

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

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

۶- Project Naptha

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

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

۷- What Font

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

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

۸- Yslow

افزونه گوگل کروم برای برنامه نویسان

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

۹- Web Developer

افزونه های گوگل کروم برای برنامه نویسان

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

۱۰- Page Ruler

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

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

۱۱- Web Developer checklist

کاربردی ترین افزونه های گوگل کروم

این افزونه کارهایی که برای توسعه وب‌سایت لازم دارید را لیست کرده است که می‌توانید برای اطمینان از اینکه تمامی کارها را انجام داده‌اید و چیزی از قلم نیفتاده است از آن استفاده کنید.

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

۱۲- DevTools Autosave

کاربردی ترین افزونه های کروم

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

۱۳- Instant Wireframe

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

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

۱۴- ColorZilla

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

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

۱۵- Ripple Emulator

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

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

برگرفته از وب‌سایت CreativeBloq