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

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


1.MeasureIt!

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

MeasureIt  Chrome Extenssion

2.BuiltWith Technology Profiler

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

  • وب سایت جاری از چه سیستم مدیریت محتوایی (CMS) استفاده میکند (Wordpress , Blog Engine و ...)
  • از چه فریم ورکی در ساخت آن استفاده شده است ( ASP.net ، ASP.net Ajax ،PHP و ...)
  • از چه ابزارهایی برای آنالیز و آمارگیری وب سایت استفاده میشود ( وبگذر ، GoStats ، GetClicky و ...)
  • از چه کتابخانه های جاوااسکریپتی استفاده میکند (jQuery ، JCarousel و ...)
  • از چه Widget هایی استفاده میکند (AddThis و ...)
  • نمایش سیستم RSS ، متاتگ ها ، جاوااسکریپت ها ، یونیکد و ...
BuiltWith Technology Chrome Extenssion

3.Validity

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

Validity  Chrome Extenssion

4.IE Tab

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

IE Tab  Chrome Extenssion

5.Resolution Test

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

Resolution Test  Chrome Extenssion

6.Aviary

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

Aviary Chrome Extenssion

7.Pendule

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

Pendule  Chrome Extenssion

8.Chrome SEO

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

 Chrome SEO Extenssion

9.Eye Dropper

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

Eye Dropper  Chrome Extenssion

10.Speed Tracer

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

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

نظرات (9) -

  • پیمان

    02/11/1390 01:44:58 ب.ظ | پاسخ به این نظر

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

    • Admin

      02/11/1390 04:29:59 ب.ظ | پاسخ به این نظر

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

  • کامیار

    02/22/1390 05:14:34 ب.ظ | پاسخ به این نظر

    افزونه های دست چینی بود. ممنون از مطلب خوبتون.

    • Admin

      02/22/1390 07:05:42 ب.ظ | پاسخ به این نظر

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

      • کامیار

        02/22/1390 07:25:38 ب.ظ | پاسخ به این نظر

        ممنون از اظهار لطفت. متاسفانه gmail، نظر شما رو به عنوان spam شناسایی کرده بود. برای همین هم دیر جوابتون رو دادم. خوشحال میشم باز هم در سایتم ببینمت. خودم هم که feed شما رو اضافه کردم به reader.
        پ.ن. سایت قشنگی داری.

        • Admin

          02/23/1390 12:21:42 ق.ظ | پاسخ به این نظر

          مرسی کامیار جان، من هم با اولین آشنایی سایت شمارو بوکمارک کردم و سر میزنم ...
          باعث افتخاره که Feed  این سایت الان در Reader  شماست ...

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

  • حمید شکسته

    12/10/1390 10:47:56 ب.ظ | پاسخ به این نظر

    سلام

    با تشکر از شما براي به اشتراک گذاري اين مطلب.

    گوگل extension ها رو براي ايرانيان باز کرد.

    http://www.narenji.ir/4119

    سربلند و پيروز باشيد.

  • Admin

    12/12/1390 11:22:10 ق.ظ | پاسخ به این نظر

    همیشه خوش خبر باشید حمید جان، به امید برداشته شدن همه محدودیت ها...

Loading