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

۱- CSS-Shack

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

۲- Marmoset

      به کمک این افزونه برای گوگل کروم به سادگی میتوانید از کدهای صفحه وب یک اسکرین شات کامل بگیرید. همچنین توسط این افزونه تصاویر و مدیاهای مورد نظر را می توانید به کدتان اضافه کنید.

۳- iMacros for Chrome

این افزونه به شما قابلیت ذخیره حرکات در سایت را می‌دهد.

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

۴- Font Playground

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

     این افزونه بسیار بی نظیر ( البته از نظر طراحان سایت) کمک شایان توجهی به شما می کند. شما می توانید تمام فونت‌هایی که در کامپیوترتان وجود دارد و یا در مجموعه “گوگل فونت” هست بر روی وبسایت خود به سادگی اعمال کنید و خروجی را مشاهده فرمایید. زیبایی این افزونه فونت‌ها، استایل‌ها و افکت‌های متنوعی می‌باشد که درون خود دارد.

۵- Window Resizer

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

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

۶- Project Naptha

به کمک این افزونه می توانید از متون یک تصویر در سایت را کپی و درج کنید.

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

۷- What Font

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

۸- Yslow

     ۲۳ معیار از ۳۴ معیاری که تیم فنی یاهو در جهت بررسی سرعت یک سایت ارائه داده‌اند در این افزونه موجود است. این افزونه به شما نشان می دهد چه چیزی باعث کند شدن صفحه وب در مرورگر شماست. این افزونه برای بهینه کردن صفحه وبسایت شما بسیار مفید است و راه حل های مناسبی را به شما ارائه می‌دهد.

۹- Web Developer

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

۱۰- Page Ruler

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

۱۱- Web Developer checklist

     این افزونه برای سئو و کاربردی بودن صفحه وب شما بسیار مفید است. به کمک این افزونه می توانید به سادگی ایرادات هر صفحه وب که در مرورگر شما باز است را ببینید. آیا نگ h1 برای این صفحه وجود دارد؟ آیا توضیحات متا برای این صفحه وجود دارد؟ این افزونه به اینگونه سوالات شما پاسخ مناسبی خواهد داد. امتحان کنید.

۱۲- DevTools Autosave

     به کمک این افزونه فوق العاده می توانید به سادگی تغییراتی که درcss یک صفحه انجام میدهد را همزمان بر روی خود سایت اعمال کنید… این یعنی صرفه جویی زیادی در زمان طراحی سایت.

۱۳- Instant Wireframe

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

۱۴- ColorZilla

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

۱۵- Ripple Emulator

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

منبع: کریتیو بلاک

تهیه و ترجمه: گروه فنی سئوروید