افزونه های کاربردی کروم برای توسعه دهندگان وب
مقالات طراحی سایت11 مورد از اکستنشن های کاربردی مرورگر گوگل کروم که با نصب آنها ، تجربه کاری راحتتری را خواهید داشت ، خصوصا اگر طراح وب باشید !
در این مقاله جذاب قصد داریم تا افزونههای کاربردی کروم برای توسعه دهندگان وب را بررسی کنیم . البته که تعداد افزونههای کاربردی کروم که آنها را با عنوان ( Extensions ) میشناسیم بسیار زیاد بوده و هرکدام کاربردهای متفاوت دارند و عملا معرفی آنها در یک مقاله ممکن نیست اما در این مقاله سعی کردهایم تا بهترین افزونههای کاربردی کروم که برای طراحان وب بسیار کاربرد دارند را معرفی کنیم . هرکدام از این افزونهها میتوانند در بخشهای طراحی و سئو و تولید محتوا بسیار کاربردی باشند لذا خالی از لطف نیست که چندین افزونه از این لیست را همیشه بروی مرورگر کروم خود نصب کنید .
افزونههای کروم دراصل از این جهت ارائه میشوند که شما بتوانید انجام برخی موارد و گزارش گیری های احتمالی را سادهتر انجام دهید . توجه داشته باشید که افزونههای کروم رایگان هستند و باید تمامی این اکستنشنها را از طریق بخش Extensions داخل خود کروم نصب کنید و هرگز این کار را از سایتهای دیگر انجام ندهید . بدون طولانی کردن صحبت به سراغ معرفی لیست کاربردی خودمان برویم . دقت کنید که ترتیب خاصی در این لیست وجود ندارد و صرفا از جهت معرفی ، ترتیب گذاری شده است .
افزونه Window Resizer
اولین افزونهای که قصد بررسی آنرا داریم افزونه Window Resizer است . امروزه تعداد افرادی که از گوشیهای موبایل برای وب گردی استفاده میکنند بسیار بیشتر از کسانی هستند که از کامپیوتر و سیستمهای خانگی استفاده میکنند و این امر باعث شده است که اکثر سایتها به صورت واکنشگر طراحی شوند تا کاربرانی که از گوشی موبایل استفاده میکنند بتوانند سایت را به صورت کامل و بدون مشکل در تلفن همراه مشاهده کنند .
افزونه ویندو ریسایزر این امکان را به طراحان میدهد که بتوانند سایت را در سایزها و حالتهای مختلف مشاهده کنند و نتیجه طراحی خود را برای دستگاه های مختلف بررسی کرده و اصلاحات لازم را انجام دهند . تصویر این افزونه را در بالا مشاهده میکنید ، البته احتمال دارد که تصویر افزونه در آینده دچار تغییر شود اما هنگام نصب اسم افزونه را حتما بررسی کنید . این افزونه مختص بخش دیزاین و طراحی قالب سایت است .
افرونه Clear Cache
کلرکش ( Clear Cache ) یکی دیگر از افزونههای کاربردی و مفید برای کروم است . این افزونه زمانی کاربرد دارد که شما قصد دارید فایلهای ذخیره شده و کش شده در مرورگر را پاک کنید . به کمک این افزونه تنها با یک کلیک میتوانید به آسانی این کار را انجام دهید .
اگر درمورد سیستم کش اطلاع ندارید ، بهتر است ابتدا در این زمینه اطلاعات کافی را بدست آورید . سیستم کش یکی از مهمترین موارد در دنیای وب است . توسط این افزونه میتوانید فایلهای دانلودی و پسوردهای ذخیره شده و یا هر اطلاعات دیگری که توسط وب سایتهای مختلف در سیستم شما ذخیره شده را پاکسازی کنید . دقت کنید که تمامی این پروسهها در پس زمینه و بصورت خودکار انجام میشود و شما تنها چند کلیک انجام خواهید داد . تصویر این افزونه را در بالا مشاهده میکنید .
افزونه JSONView
اگر یک برنامه نویس و توسعه دهنده وب هستید بدون شک با اطلاعات بصورت جیسون ( JSON ) سرو کار دارید . پارس کردن این اطلاعات و نمایش به شکل زیبا میتواند یکی از آرزوهای شما باشد . میتوانید به کمک افزونه جیسون ویور متنهای جیسون را بصورت مرتب شده و زیبا و رنگی مشاهده کنید . دادههای JSON در گام اول ازنظر درک کمی دشوار هستند لذا به این افزونه حتما نیاز خواهیم داشت .
کار با این افزونه بسیار راحت است و نیاز به دانش خاصی ندارد و در یک پروسه خودکار دادههای جیسون را به شکل درختی نمایش میدهد که در عیب یابی و درک کدها بسیار کمک خواهد کرد . این افزونه بیشتر در بخش برنامه نویسی کاربرد دارد که تصویر این افزونه را در بالا مشاهده میکنید .
افزونه SEO Spider Tools
یکی دیگر از افزونههای کاربردی کروم ، افزونه سئو اسپایدر تولز یا همان ابزارهای عنکبوت سایت است که به شما کمک میکند تا بتوانید لینکهای خراب سایت خود را پیدا کنید . این افزونه یکی از بهترین و کاربردیترین افزونهها در بخش سئو و بهینهسازی سایت است .
بدون شک وجود حتی یک لینک خراب و Broken در سایت از لحاظ سئو ، میتواند ضربه جیران ناپذیری به سایت شما وارد کند و همچنین تجربه ناخوشایندی را برای یک بازدید کننده به همراه دارد . درکل این افزونه برای بهبود سایت از لحاظ سئو تکنیکال یا همان On-Page-Seo است .
به کمک این افزونه میتوانید لینکهای مخرب را پیدا کرده و به صفحات مناسب تغییر مسیر ( ریدایرکت ) کنید . تصویر این افزونه در بالا قرار گرفته است . اما ادامه !
افزونه Lorem Ipsum generator
بدون شک افرادی که در زمینه طراحی و برنامه نویسی سایت فعالیت دارند با لورم ایپسوم آشنا هستند . لورم ایپسوم در حقیقت یک متن بی معنی و آزمایشی است که طراحان از آن متن استفاده میکنند تا به مشتری نشان دهند که سایت طراحی شده پس از آنکه متن در آن قرار گیرد به چه شکلی دیده میشود .
با این افزونه میتوانید بدون مراجعه به سایت لورم ایپسوم مستقیما در همان لحظه متن آزمایشی تولید کنید و در طراحیهای خود از آن استفاده کنید در این افزونه میتوانید تعداد پاراگراف و تعداد جمله درهر پاراگراف را مشخص کنید و نهایتا براساس نیاز ، متن برای شما تولید میشود . تصویر افزونه به شکل بالا است .
افزونه cssViewer
مورد دیگری از افزونههای کاربردی کروم که اصطلاحا خوراک بخش طراحی و Front-end است ، افزونه cssViewer میباشد . این افزونه تقریبا همان کار اینسپکت المنت ( Inspect ) مروگرها را انجام میدهد . با این تفاوت که این افزونه مختص بررسی کدهای سی اس اس در یک صفحه میباشد .
با استفاده از این افزونه میتوانید هر المنت و عنصری که در صفحه وب مدنظر شما وجود دارد را انتخاب کرده و در یک پنل شناور ، اطلاعات Css مربوط به آن عنصر را مشاهده کنید . این افزونه به شما کمک میکند تا سریعتر و فقط با hover کردن روی یک عنصر همه اطلاعات آن را مشاهده کنید .
البته در این افزونه این امکان وجود ندارد که بتوانید استایل عناصر را تغییر دهید و فقط برای نمایش استایل یک عنصر در یک صفحه وب کاربرد دارد . تصویر افزونه در مخزن مرورگر کروم را میتوانید در بالا مشاهده کنید .
افزونه ColorPick Eyedroppr
شاید شما نیز علاقه دارید رنگ یک تصویر و یا متن موجود در یک صفحه وب را پیدا کرده و از آن استفاده کنید . افزونه کالر پیکر دقیقا به کار شما خواهد آمد . با استفاده از این افزونه رنگ هر پیکسلی از صفحه را که نیاز داشته باشید میتوانید به دست آورده و از آن استفاده کنید .
با انتخاب این افزونه بروی هر پیکسلی از صفحه که hover کنید رنگ آن پیکسل در یک صفحه شناور به شما نشان داده خواهد شد . این افزونه رنگ را براساس کد های rgb , hex و hsl نمایش میدهد . تصویر این افزونه به همراه نام اصلی آن را در تصویر بالا مشاهده میکنید .
افزونه Web Developer
بدون شک میتوان گفت یکی از بهترین افزونههای کاربردی کروم برای کمک به طراحان وب سایت افزونه Web Developer است . با نصب این افزونه یک ویژگی اساسی به مروگر خود اضافه خواهید کرد که امکانات فوق العاده جذابی را در اختیار شما قرار میدهد .
در این افزونه امکان غیر فعال کردن جاوا اسکریپت در یک صفحه وب وجود دارد و همچنین میتوانید دستورات Css یک صفحه را غیر فعال کنید . علاوه بر این موارد میتوانید تصاویر موجود در یک صفحه را مخفی کنید .
یکی دیگر از قابلیتهای خوب که در این افزونه موجود است امکان مشخص کردن div های موجود در صفحه است . میتوانید به کمک این ابزار محدوده div های موجود در صفحه را براحتی مشاهده کرده و درک مناسبی از نحوه تقسیم بندی المانها در صفحه داشته باشید . همین قسمت یک کمک شایان به تمامی علاقمندان به حوزه طراحی سایت است که در مراحل اولیه یادگیری قرار دارند لذا نصب این افزونه بروی کروم ، خالی از لطف نیست .
افزونه های کاربردی کروم ، افزونه FireShot
گاهی اوقات نیاز است که از یک صفحه وب به شکل سراسری عکس برداری کنید . برای مثال پس از ثبت نام و دریافت کد رهگیری و یا پس از پرداخت صورتحساب از رسید پرداخت عکس تهیه کنید .
البته برای این دسته از موارد میتوانید از گزینه چاپ کردن نیز استفاده کنید ولی متاسفانه گزینه پرینت آنطوری که سایت را مشاهده میکنید از صفحه پرینت نخواهد گرفت و اکثر افراد از پرینت گرفتن ناراضی هستند . در اینگونه مواقع عکس گرفتن بهترین گزینه است . شما به کمک این افزونه میتوانید از صفحه وب عکس گرفته و به شکلی بسیار باکیفیت ذخیره کنید .
این افزونه گزینههای متفاوتی را در اختیار شما قرار میدهد برای مثال میتوانید یک قسمت خاصی را انتخاب کرده و از آن قسمت عکس تهیه کنید و یا میتوانید به اندازه پنجرهای که مشاهده میکنید از صفحه عکس بگیرید . اما گزینه دیگری نیز وجود دارد که میتوان به کمک آن از کل صفحه وب نیز عکس گرفت و کل سایت را به صورت عکس ذخیره نمود . یکی از خصوصیات این افزونه امکان ذخیره سازی تصاویر گرفته شده در فرمت های مختلف و همچنین ذخیره تصویر به صورت فایل pdf میباشد .
یکی از بهترین کاربردهای این افزونه برای زمانی است که طراحان سایت قصد دارند تا تصاویر نمونهکارهای خودشان را جهت ارائه به کارفرمایان یا قراردادن در سایت خودشان ذخیره کنند . برای این دست موارد ، حتما استفاده از افزونههایی همچون FireShot ضروری است .
افزونه Print Friendly & Print
شاید گاها علاقه داشته باشید از یک صفحه وب پرینت بگیرید ولی قصد ندارید برخی از قسمتها در برگه پرینت وجود داشته باشند . حتی اگر قصد دارید از صفحه عکس بگیرید شاید در قسمتی از صفحه بخشی وجود داشته باشد که علاقه نداشته باشید در برگه ظاهر شود .
یکی از افزونههای کاربردی کروم در اینجا به کار شما سرعت خواهد داد . برای حذف اینگونه بخشها قبل از پرینت گرفتن و یا عکس گرفتن ، میتوانید از افزونه پرینت فرندلی استفاده کنید . این افزونه قدرتمند در مرورگر کروم ، به شما کمک میکند هر عنصر و المانی که در صفحه وجود دارد را موقتا مخفی یا حذف کنید تا عناصر مدنظر در صفحه پرینت شده وجود نداشته باشند . یکی دیگر از افزونههایی که وجود آن در لیست اکستنشنها ، خالی از لطف نیست ! تصویر افزونه را در بالا مشاهده میکنید .
افزونه wappalyzer ( از محبوبترین ها )
یکی از افزونههای واقعا کاربردی و محبوب گوگل کروم که شخصا علاقه بسیار زیادی به آن داریم . همه روزه امکانات و ابزارهای جدید در دنیای وب جهت طراحی یا کدنویسی پروژهها منتشر میشوند و طراحان خوش ذوق از امکانات مختلف در وب سایتهایی که طراحی مینمایند استفاده میکنند .
شاید با دیدین انیمیشنهای جذاب در یک سایت ، برای شما سئوال باشد که چگونه این انیمیشنها ایجاد شده و از چه کتابخانههایی برای خلق آنها استفاده شده است . در اینگونه مواقع افزونه wappalyzer به کمک شما خواهد آمد . توسط این افزونه شما قادر هستید تا اطلاعات جامع و مفیدی از فناوریهای استفاده شده در یک وب سایت به دست آورید .
برای مثال میتوان سیستم مدیریت محتوای استفاده شده و یا زبان برنامه نویسی به کار رفته برای طراحی و برنامهنویسی یک سایت را بدست آورد . همچنین کتابخانههای جاوا اسکریپتی استفاده شده در سایت مورد نظر را برای شما نمایش خواهد داد که میتوانید به کمک این افزونه از فناوریهای جدیدی که رقبای شما استفاده میکنند بسادگی باخبر شوید . تصویر افزونه را در تصویر بالا مشاهده میکنید . برای مطالعه مقالات بیشتر حتما وب سایت ما را دنبال کنید . پاینده باشید ، سئو نود
فیروز بیگلری ، 10 سال است که در زمینه برنامه نویسی وب سایت و همچنین سیستم های عامل فعالیت می کنم . متخصص وردپرس ، PHP کار ، علاقمند به فرانت اند ، تولید محتوا و سئو
نقشه راه فرانت
اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید
مدت زمان لازم برای یادگیری فریمورک تیلویند چقدر است و در چه مدت زمانی میتوان خود را یک فرد مسلط به این فریمورک خطاب کرد ؟ در این مقاله همراه ما باشید .
آیا امکان طراحی قالب و کسب درآمد تنها با یادگیری و تمرین زبان Css امکان پذیر است ؟ یا در این بین باید به سراغ زبان های دیگری نیز رفت ؟ به این سوال مهم در این مقاله به شکل کامل پاسخ خواهیم داد !