بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

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

مقالات طراحی سایت

11 مورد از اکستنشن های کاربردی مرورگر گوگل کروم که با نصب آنها ، تجربه کاری راحت‌تری را خواهید داشت ، خصوصا اگر طراح وب باشید !

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

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

مقاله پیشنهادی جهت مطالعه : سایت های کاربردی طراحی سایت

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

افزونه Window Resizer

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

افزونه Window Resizer

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

افرونه Clear Cache

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

افرونه Clear Cache

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

افزونه JSONView

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

JSONView

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

افزونه SEO Spider Tools

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

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

بدون شک وجود حتی یک لینک خراب و Broken در سایت از لحاظ سئو ، می‌تواند ضربه جیران ناپذیری به سایت شما وارد کند و همچنین تجربه ناخوشایندی را برای یک بازدید کننده به همراه دارد . درکل این افزونه برای بهبود سایت از لحاظ سئو تکنیکال یا همان On-Page-Seo است .

افزونه SEO Spider Tools

به کمک این افزونه می‌توانید لینک‌های مخرب را پیدا کرده و به صفحات مناسب تغییر مسیر ( ریدایرکت ) کنید . تصویر این افزونه در بالا قرار گرفته است . اما ادامه !

افزونه Lorem Ipsum generator

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

افزونه Lorem Ipsum generator

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

افزونه cssViewer

مورد دیگری از افزونه‌های کاربردی کروم که اصطلاحا خوراک بخش طراحی و Front-end است ، افزونه cssViewer می‌باشد . این افزونه تقریبا همان کار اینسپکت المنت ( Inspect ) مروگرها را انجام می‌دهد . با این تفاوت که این افزونه مختص بررسی کدهای سی اس اس در یک صفحه می‌باشد .

دوره آموزشی پیشنهادی : دوره رایگان طراحی cms با php و mysql

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

افزونه cssViewer

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

افزونه ColorPick Eyedroppr

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

افزونه ColorPick Eyedroppr

با انتخاب این افزونه بروی هر پیکسلی از صفحه که hover کنید رنگ آن پیکسل در یک صفحه شناور به شما نشان داده خواهد شد . این افزونه رنگ را براساس کد های rgb , hex و hsl نمایش می‌دهد . تصویر این افزونه به همراه نام اصلی آن را در تصویر بالا مشاهده می‌کنید .

 

افزونه Web Developer

بدون شک می‌توان گفت یکی از بهترین افزونه‌های کاربردی کروم برای کمک به طراحان وب سایت افزونه Web Developer است . با نصب این افزونه یک ویژگی اساسی به مروگر خود اضافه خواهید کرد که امکانات فوق العاده جذابی را در اختیار شما قرار می‌دهد .

در این افزونه امکان غیر فعال کردن جاوا اسکریپت در یک صفحه وب وجود دارد و همچنین می‌توانید دستورات Css یک صفحه را غیر فعال کنید . علاوه بر این موارد می‌توانید تصاویر موجود در یک صفحه را مخفی کنید .

افزونه Web Developer

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

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

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

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

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

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

یکی از بهترین کاربردهای این افزونه برای زمانی است که طراحان سایت قصد دارند تا تصاویر نمونه‌کارهای خودشان را جهت ارائه به کارفرمایان یا قراردادن در سایت خودشان ذخیره کنند . برای این دست موارد ، حتما استفاده از افزونه‌هایی همچون FireShot ضروری است .

افزونه Print Friendly &  Print

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

افزونه Print Friendly &  Print

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

افزونه wappalyzer ( از محبوب‌ترین ها )

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

شاید با دیدین انیمیشن‌های جذاب در یک سایت ، برای شما سئوال باشد که چگونه این انیمیشن‌ها ایجاد شده و از چه کتابخانه‌هایی برای خلق آنها استفاده شده است . در اینگونه مواقع افزونه wappalyzer به کمک شما خواهد آمد . توسط این افزونه شما قادر هستید تا اطلاعات جامع و مفیدی از فناوری‌های استفاده شده در یک وب سایت به دست آورید .

افزونه wappalyzer کروم

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

مدیر سئو نود

فیروز بیگلری ، 10 سال است که در زمینه برنامه نویسی وب سایت و همچنین سیستم های عامل فعالیت می کنم . متخصص وردپرس ، PHP کار ، علاقمند به فرانت اند ، تولید محتوا و سئو

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

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

0 1,643

چگونه توسط سلکتور focus: در css ، تغییر استایل های مختلفی را روی المان های فرم ایجاد کنیم ؟ بررسی تفاوت focus و hover در طراحی با css !

0 63
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

دیدگاه های شما
علی ساعدی ۰۸ / ۱۳۹۹

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

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود