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

1396/5/16 علیرضا حاتمی نیا 2086

top chrome extentions for-web developers

مقدمه

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

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

ruul. Screen ruler

Users: 647,052 | Rate: 4.5 /5
 

chrome web apps ruul Screen ruler


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

Evernote Web Clipper

Users: 4,296,612 | Rate: 5/5

chrome web app Evernote web Clipper

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

Web Developers

Users: 1,102,025 | Rate: 4.5/5

chrome web apps We developer


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

Eye Dropper

Users: 479,898  | Rate: 4/5

chrome web apps Eye Dropper

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

Resolution Test

Users: 136,492  | Rate: 4/5

chrome web apps Resolution Test.


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

Corporate Ipsum

Users: 10,984  | Rate: 5/5

chrome web apps Corporate Ipsum


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

Firebug Lite

Users: 577,404  | Rate: 4/5

chrome-web-apps-Firebug-Lite


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

Wappalyzer

Users: 600,215  | Rate: 5/5

chrome web apps -wapplyzer


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

CSS3 Generator

Users: 11,427  | Rate: 5/5

chrome web apps CSS3 generator


یه طراح وب واقعا از یک افزونه کروم بر مبنای css چه انتظاری دارد ؟ با این افزونه شما می توانید به راحتی کدهای CSS  خود را با ابزارهای کاربر پسند تولید کرده و در پروژه های خود استفاده نمایید. این افزونه به شما امکان ساخت Text Shadow ، تغییر rgb  به هگزا دسیمال ، Transformها ، Linear Gradients ، Transition  و چندین امکان کاربردی دیگر را به شما می دهد. حتما پیشنهاد می کنم این افزونه کروم را نصب کنید

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت