۴۰ افزونه گوگل کروم برای طراحان وب

گوگل کروم برای طراحان وب

من عاشق گوگل کرومم، سادگیش، سرعت و قابلیت‌هاش بدون شک فوق‌العادست. اما خوب، بعضی وقت‌ها زیاد ساده بودن هم خودش مشکلیه مخصوصا برای ما طراحان وب که به شدت به افزونه‌های فایرفاکس مثل Web Develoer وابسته شدیم. خودم شخصا از استفاده کردن از کروم منصرف شدم، چون افزونه‌های مناسبی نداشت. اما اون موقع سال ۲۰۰۸ بود.... اما همه چیز تغییر میکنه. جای تعجب نیست که طراحان دیگه که اون‌ها هم کروم رو دوست داشتن شروع به نوشتن افزونه برای اون کردن. من هم ۴۰تا از این افزونه‌ها که خیلی به درد طراحان وب می‌خوره رو اینجا جمع کردم و اون‌ها رو با شما به اشتراک می‌گذارم. خوب، اینجان، پس اون‌ها رو به کروم اضافه کنید و قدرت طراحی وب خودتون رو حسابی افزایش بدین:

رنگ

ColorPicker همینجور که اسمش میگه افزونه‌ایست برای به دست آوردن کد هگز یه رنگ خاص از روی یک صفحه وب. قابلیت جالب دیگه‌ای که داره اینه که یک محدوده رو انتخاب میکنید، و رنگ اون رو با این افزونه تغییر میدین، بدون اینکه حتی به یک خط کد دست بزنید. colorpicker
Chrome Pallete از شدت خسته کننده بودن پیدا کردن طرح رنگ(Color Scheme) یک عکس سردرد میگیرید؟ پس افزونه‌ی کروم پالت مخصوص شماست، از هر عکس ۶۴ پالت مختلف ایجاد میکنه Chrome Pallete
Colour Tweaker همون کار Color Picker رو انجام میده اما با یک متد خاص. در فیلد سلکتور(Selector) ، سلکتور مربوطه در بخش CSS قسمتی رو که میخواین رو وارد کنید و بعد به راحتی رنگ متن، زمینه، و حاشیه اون رو تغییر بدین Color Tweaker

 

تایپوگرافی

Font Editor دیگه حدس زدن و یک عالمه از این پنجره به اون پنجره رفتن برای مشاهده تغییرات اعمال شده لازم نیست. این افزونه به شما اجازه میده تغییرات واریانت، ارتفاع، نوع و خانواده، ارتفاع خطوط و .... رو به سادگی اعمال کنید و همان لحظه مشاهده کنید font-editor
Google Font Previewer همان‌طور که از اسمش پیداست امکان پیش‌نمایش فونت‌ها رو از فولدر فونت‌های گوگل رو در اختیار شما میگذاره. همچنین میتونید استایل فونت‌ها رو هم تغییر بدین. این تغییرات شامل size,style,weight و shadow میشه. اگه از فونت خاصی خوشتون اومد میتونید میتونید کد CSS اون فونت رو که این افزونه در اختیارتون قرار میده رو در وبسایتتون کپی کنید تا از این فونت استفاده کنید. google-font-previewer

 

 

طراحی و توسعه

Web Developer مطمئنا افزونه‌ایست که داشتنش برای هر طراح وب لازم و واجبه. از دیدن اسکریپت‌ها گرفته تا نمایش اطلاعات هر شیئ. این افزونه سعی میکنه هرنوع اطلاعاتی رو که از یک وب‌سایت خاص لازم دارید رو در اختیارتون بگذاره. این افزونه همچنین مجهز به ابزارهای مفیدی مثل color picker, windows resizer, validaor,.... شده. web-developer
Pendule یک ابزار سبک مشابه Web Developer اما فقط مجهز به ابزار خاص مثل Style Viewer, Source Viewer و Validator pendule
Firebug Lite با کاری که در فایرفاکس انجام میده متفاوته. یک نوع نمایش ویژوال فایرفاکس-مانند رو در اختیار شما قرار میده. همچنین قابلیت ردیابی المان‌های HTML با موس رو هم دارد. همچنین میتونید به صورت زنده کد CSS مربوط به هر المان رو تغییر بدین و تغییرات رو همون لحظه مشاهده کنید firebug-lite
Stylebot این فابلیت رو به شما میده که بدون دست زدن حتی به یک خط کد، استایل مربوط به هر صفحه رو تغییر بدین که شما رو از مقدار زیادی کد نویسی راحت میکنه. بهترین قابلیتش احتمالا اینه که هر دفعه تغییری در وبسایت ایجاد میکنید میتونه براتون کدهای CSS تولید کنه stylebot
CSSViewer از زدن دکمه‌ی 'inspect element' هر دفعه که میخواین کد CSS یک بخش رو ببینید خسته شدین؟ این افزونه کار شما رو با نمایش اطلاعاتی مثل فونت، رنگ، مکان و ... راحت میکنه cssviewer
Stylesheet Reloader بدون refresh کردن کل وبسایت CSS جدید رو به اون اعمال کنید که در زمان به شدت صرفه‌جویی میکنه مخصوصا برای طراحانی با سرعت اینترنت پایین stylesheet-reloader
BuiltWith Technology Profiler باحال‌ترین قسمت این افزونه اینه که هر نوع تکنولوجی وب به کار رفته رو مثل فریم‌ورک‌ها و استانداردهای وب رو با اطلاعات کامل در مورد جزئیات رو لیست میکنه builtwith-technology-profiler
IE Tab Multi این افزونه در واقع اینتزنت اکسپلورر شما داخل کروم هست که مقدار زیادی از قابلیت‌های پیش‌فرض اینترنت اکسپلورر رو پشتیبانی میکنه ie-tab-multi
Window Resizer با این افزونه میتونید سازگاری وضوح(Resolution) صفحه وبسایتتون رو با وضوح استاندارد یا تعریف شده توسط خودتون تست کنید window-resizer
HTML Validator یکی از بهترین افزونه‌ها در نوع خودش که میتونه به اعتبارسنجی کدهای HTML انلاین یا افلاین(روی localhost) به صورت دستی یا اتوماتیک بپردازه. میتونید نتیجه اعتبارسنجی رو در یک تب جدید یا در همان تب ببینید. htlml-validator
Sight با گزینه‌های فونت و تم متعدد. این افزونه متن کد وبسابت رو به یک حالت راحت‌تر برای خواندن تبدیل میکنه sight
PHP Console با باگ‌های PHP روبرو شدین اما نمیدونید کدوم قسمت باعث ایجاد مشکل شده؟ این افزونه با نشان دادن خطاها، استثتاهای رخ داده و پیغام‌های خطایابی شما رو یاری میکنه php-console
JavaScript API Search با داشتن قابلیت AutoComplete امکان جست و جوی توابع و APIهای جاوااسکریپت رو از طریق نوار آدرس به صورت آنلاین در اختیار شما میگذاره. اگر هم مورد جست‌و‌جوی شما پیدا نشد به کمک سرویس‌های Google Codesearch, Development and Coding Search و the Mozilla Developer Network search موارد مرتبط رو نمایش میده javascript-api-search
jQuery API Search امکان جست‌وجوی API های jQuery رو از نوار آدرس رو در اختیار شما قرار میده. فقط کافیه در نوار آدرس jq رو با یک فاصله بعد از اون وارد کنید و جست‌وجوی خودتون رو انجام بدین jquery-api-search
PHP Search مانند افزونه‌ی قبلی اما برای PHP php-search

 

 

افزایش کارایی

Stay Focused به خودتون قول دادین از وب‌سایت‌هایی که زمان شما رو به هدر میدن دوری کنید اما نتونستین؟ این افزونه به مدت زمان مشخص شده توسط شما این وبسایت‌ها رو بلاک میکنه. و هنگامی که میخواین این افزونه رو غیرفعال کنید یا زمان بلاک بودن وبسایت‌ها رو کاهش بدین به شدت به شما هشدار میده. همچنین مجهز به قابلیت هسته‌ای! هست که به طور جالبی میل شما برای دستیابی به این وبسایت‌ها رو به شیوه‌ی بی‌رحمانه‌ای از بین میبره stay-focused
Speed Dial قابلیتی مثل مرورگر اپرا که در صفحه‌ی تب جدید بوک‌مارک‌های مورد علاقه رو نشون میده. همچنین میتونید پس زمینه و تم رو هم تغییر بدین speed-dial
PopChrom به کمک این افزونه میتونید کلید میانبر برای عبارات و متن‌هایی که زیاد مورد استفاده قرار میگیرن تعریف کنید مثل ٬مت برای ٬متشکرم٬ که با زدن کلید فعال‌سازی متن میانبر رو به متن موردنظر تبدیل میکنه popchrom
Quickrr Productivity Kit شامل یکسری از ابزار مفید مثل مترجم،ماشین حساب، لیست کارها و .... هست quickrr-productivity-kit
Todoist بعد از ساختن یک حساب کاربری که به سادگی انجام میشه هرجا که کروم با این افزونه وجود داشته باشه میتونید به لیست کارهاتون دسترسی داشته باشین todoist
Ananke Timer مدت زمانی رو که روی یک کار خاص یا یک صفحه یا یک وب‌سایت صرف کردین رو اندازه بگیرین ananke
Chrome Toolbox قابلیت‌های جدیدی رو به کروم اضافه میکنه مثل تغییر رفتار مرورگر در موقعیت خاص و تعریف میانبرها chrome-toolbox
Chrome Page Extended ایجاد میانبر برای دسترسی سریع به صفحات کروم مثل افزونه‌ها chrome-page-extended
AppJump میتونید با این افزونه برنامه‌های کروم رو از طریق تولبار مرتب و اجرا کنید appjump
Bookmark Bar Switcher با این افزونه میتونید نوار بوکمارک‌های متفاوتی تعربف کنید و به سادگی بین اون‌ها سوییچ کنید bookmark-bar-switcher
TabCloud تب‌های باز خودتون رو در هر جلسه ذخیره کنید تا در دفعات بعدی باز کردن کروم به سادگی اون‌ها رو بازیابی کنید tabcloud

 

 

منابع

Similar Pages این افزونه که توسط گوگل درست شده صفحاتی که داراری مطالب مشابه با مطلبی که در حال خواندن اون هستین رو نمایش میده similar-pages
Universal Search دارای قابلیت جست‌وجوی مطالب در موتورهای جست‌وجوی مختلف هست. همچنین هنگامی که متنی رو در صفحه انتخاب میکنید یک پنجره‌ی کوچک باز میکنه که میتونید متنتون رو در سایت مورد نظر جست‌وجو کنید Universal-Search
Awesome Screenshot میتونید از هر قسمت صفحه که نیاز دارید عکس تهییه کنید و نواحی مورد نظر رو با دایره، مربع، متن و ... مشخص کنید سپس عکستون رو با فرمت PNG روی کامپیوتر یا وب ذخیره کنید awesome-screenshot
Clip to Evernote افزونه‌ی رسمی Evernote، با قابلیت همگام‌سازی تمام متون شما و همچنین جست‌وجو در میان آن‌ها clip-to-evernote
Diigo با این افزونه هر قسمت از متن یک صفحه رو که مایلید هایلایت کنید و همچنین میتونید اون رو با دیگران به اشتراک بگذارید. تا هربار که به صفحه برگشتین موارد هایلایت شده رو ببینید diigo
Thinkery یه جورایی ذهن آنلاین شماست. متن‌ها و لینک‌هاتون رو توش ذخیره کنید تا بعدا به اون‌ها رسیدگی کنید thinkery
MyNotes نت برداری باید یک پروسه‌ی آسان باشه. با این افزونه هست! هر متنی رو که انتخاب کردین از منوی قابل دسترسی در راست کلیک، اون رو به افزونه برای ذخیره سازی بفرستین mynotes
Add to Google Bookmarks وب‌سایت جالبی رو دیدین که زمان کافی برای مطالعه‌اش رو ندارید؟ کافیه روش راست‌کلیک کنید تا به بوک‌مارک‌های گوگل اضافه کنید تا بعدا ازون لذت ببرید add-to-google-bookmarks
Microstock Photo Power Search افزونه‌ای برای جست‌وجوی وبسایت‌های عکس مثل Fotolia, Dreamstime and Shutterstock microstock-photo-power-search
منبع: hongkiat.com

 

تگ های مطلب: 

دیدگاه‌ها

ممنون کوشا جان. عالی بود.

ممنون کوشا جان. عالی بود.

عالي بود

بسيار عالي بود. واقعا از اين همه امكانات لذت بردم. ممنون كه اين مطلب رو منتشر كرديد

ممنون

لیست بسیار خوبی بود، ممنون. افزونه‌ی Web Developer خودش گزینه‌ی Resize هم دارد و نیازی به افزونه‌ی Window Resizer نیست. من اینها رو هم پیشنهاد می‌کنم: Lipsum Fireshot Wappalyzer WebRank SEO

سایت

چه دنیای بزرگیه این کروم ، من که عاشقشم

گوگل کروم

چه دنیای بزرگیه این کروم ، من که عاشقشم

hi

عای بود کوشا جان

ممنونم بينظير بود ... فقط

ممنونم بينظير بود ... فقط كروم افزونه اي نداره كه تب ها رو رنگي كنه و باعث تفاوت در موضوعات بشه ؟؟؟ همچنين افزونه اي كه تب ها رو چند رديفه كنه ؟؟؟ ...منونم ميشم راهنمايي كنيد ...

دوست عزیز متاسفانه توسعه

دوست عزیز متاسفانه توسعه دهندگان افزونه‌هایگوگل کروم به همه‌ی قابلیت‌هایی که فایرفاکس داره دسترسی ندارند، مخصوصا تغییر در خود رابط کاربری مرورگر، پس (فعلا) نمی‌شه افزونه‌ای برای این دو قابلیت پر طرفداری که شما گفتی نوشت (به نقل از سافت‌پدیا) ولی تو برنامه‌ی کرومیم و نهایتا گوگل کروم اضافه کردن این توانایی‌ها به نوار تب در نظر گرفته شدهhttp://dev.chromium.org/developers/design-documents/tabtastic-2-requirements)به هرحال، افزونه‌های دیگه‌ای هست مثل این دو:https://chrome.google.com/extensions/detail/amigcgbheognjmfkaieeeadojiibgbdphttps://chrome.google.com/webstore/detail/galfofdpepkcahkfobimileafiobdplb

تشکر

آقا یک دنیا ممنون خیلی علی بود مرسی

عالی بود

از پست کاربردی و مفیدتون ممنون. :-*

تشکر

عالی بود مرسی

با عرض ادب خدمت شما ٬ معلومه

با عرض ادب خدمت شما ٬ معلومه که برای تهیهٔ این لیست زحمات زیادی کشیدید ٬ ممنونم از شما . خدا خیرتون بده

دیدگاه جدیدی بگذارید

آخرین ارسال ها

محتواهای محبوب

درباره ما

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

تماس با ما

با ما تماس بگیرید.

logo-samandehi