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

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

گوسفند زنده
گوسفند زنده

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

خودتان را اینجا معرفی کنید

۱- 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

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

مجید علوی‌زاده

مجید علوی زاده فعالیت حرفه ای خود را از سال ۱۳۷۷ با طراحی گرافیک شروع کرد، طراحی وب را از سال ۱۳۸۰ و برنامه نویسی وب را از سال ۱۳۸۱ آغاز کرد و در همان سال وب سایت مجید آنلاین را تاسیس کرد. هم اکنون تخصص او طراحی و توسعه وب است.

نظرات و سوالات کاربران

ارسال پاسخ

مرجان آشفته

پنج شنبه ۲۸ مرداد ۱۳۹۵ ۱۰:۵۹

سلام دوستان
افزونه ای مثل Wappalyzer برای تشخیص فریم ورک و زبان هایی که یک سایت باهاش نوشته شده، می تونه راهنمای خوبی باشه.
همینطورافزونه ی رنک alexa - که همه باهاش آشنایی دارن- می تونه خیلی راحت رنک به روز سایت ها رو براتون نمایش بشه.