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

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

7e25d01cbe6dcf30.jpg

1.MeasureIt!

این افزونه همانطور که از نام آن پیداست ، برای اندازه گیری است . بعد از نصب آن و ظاهر شـدن آیکون این افزونه بالای مرورگر کروم شما ، میتوانید در هر لحظه در هر سایت با یک کلیک ساده بر روی آن هر عنصری را در صفحه از لحاظ طول و عرض اندازه بگیرید . مثلا” گاهی نیاز دارید بدانید طول و عرض یک سایت ، یک لوگوی وب سایت ، یک ستون ، آیکون و … چقدر است . با کلیک بر روی آیکون این افزونه نشانگر ماوس به شکل + در آمده و کافیست ناحیه ای را که می خواهید اندازه گیری کنید با کشیدن یک کادر در محیط آن ، انتخاب کنید . مقدار width و height در کنار آن ظاهر میشود .

 

2.BuiltWith Technology Profiler

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

  • وب سایت جاری از چه سیستم مدیریت محتوایی (CMS) استفاده میکند (WordPress , Blog Engine و …)

  • از چه فریم ورکی در ساخت آن استفاده شده است ( ASP.net ، ASP.net Ajax ،PHP و …)

  • از چه ابزارهایی برای آنالیز و آمارگیری وب سایت استفاده میشود ( وبگذر ، GoStats ، GetClicky و …)

  • از چه کتابخانه های جاوااسکریپتی استفاده میکند (jQuery ، JCarousel و …)

  • از چه Widget هایی استفاده میکند (AddThis و …)

  • نمایش سیستم RSS ، متاتگ ها ، جاوااسکریپت ها ، یونیکد و …

 

3.Validity

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

 

4.IE Tab

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

 

5.Resolution Test

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

6.Aviary

این افزونه یکی از کاربردی ترین افزونه های رایگان کروم است . توسط افزونه Aviary میتوانید از صفحه وب جاری یک تصویر گرفته (Capture) و در سایت Aviary.com با استفاده از ابزارهای بسیار گسترده و بی نظیر به ویرایش آن بپردازید . ابزارهایی نظیر شکل های هندسی ، فلش ، یادداشت ، تغییر رنگ ، افکت ، صدا ، موزیک و بسیاری از امکانات دیگر که میتوانید بر روی تصویر سایت مورد نظر اعمال نمایید . در پایان میتوانید تصویر ویرایش شده را همراه با تمام یادداشت ها، صدا ها و المان های اضافه شده ذخیره نمایید.

 

7.Pendule

افزونه Pendule مجموعه ای از امکانت بسیار مفید را در اختیار شما قرار میدهد . امکاناتی مانند مشاهده یک صفحه بدون کدهای CSS ، مشاهده فقط کدهای CSS ، مشاهده فقط کدهای جاوا اسکریپت ، نمایش همه لینک های مخفی و آشکار در صفحه ، نمایش و یا مخفی کردن تمام عکس های بکار رفته شده در صفحه ، امکان مشاهده کد رنگ های هر قسمت از صفحه (Color Picker)، اعتبار سنجی RSS ، کدهای HTML و ده ها امکان دیگر که به در طول مدت طراحی یک صفحه به شما کمک شایانی میکنند.

 

8.Chrome SEO

افزونه Chrome SEO مجموعه ای از امکانات برای بررسی موراد مربوط به SEO را در اختیار شما قرار میدهد . توسط این ابزار میتوانید صفحات وب را به طور دقیق آنالیز کنید . این آنالیز اطلاعاتی جامع از وضعیت وب سایت از دید سایت ها و موتورهای جستجوی محبوب مانند Google ، Yahoo ، Bing ، Ask ، MajesticSEO و … با جزییات کامل نمایش میدهد . شما میتوانید تعداد سایت هایی که به صفحه مورد نظر شما لینک داده اند ، سایت هایی که لینک آنها ارزشی ندارد ، تعداد صفحات ایندکس شده ، رتبه و بسیاری از موارد دیگر را از دید سایت های رتبه دهی گوناگون بررسی کنید .

 

9.Eye Dropper

افزونه Eye Dropper بسیار شبیه افزونه ColorZilla در فایرفاکس است . به کمک این افزونه میتوانید کد رنگ هایی را که در صفحات وب به کار رفته شده پیدا کنید و در برنامه ویرایش تصویر مثل فتوشاپ از آن رنگ استفاده کنید . کافیست روی این افزونه کلیک کرده و سپس نشانگر را بر روی رنگ مورد نظر ببرید ، رنگ انتخاب شده در گوشه سمت چپ پایین صفحه همراه با کد آن نمایش داده می شود . همچنین این افزونه یک آرشیو از رنگ هایی که شما انتخاب میکنید در خود نگهداری می کند و شما میتوانید همیشه به یک آرشیو رنگ سفارشی که برای خود ساخته اید، دسترسی داشته باشید .

 

10.Speed Tracer

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

بازدید: 0

درباره نویسنده

مطالب مرتبط

1 نظر

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *