در حالی که کروم به شکل پیشفرض ابزارهایی را برای طراحان و دولوپرهای وب سایت در نظر گرفته، اما شما می توانید با اضافه کردن پلاگین های طراحی سایت کروم قابلیت های جدیدی را به این مرورگر اضافه کنید. پلاگین ها در کروم به نام اکستنشن نیز شناخته می شوند و ما در این مطلب از وب سایت دارکوب میخواهیم بهترین اکستنشن های طراحی سایت در کروم را معرفی کنیم که داشتن آن ها برای هر طراح وب سایتی مفید و کارآمد است.
با توجه به نیاز هایی که دارید و انتخاب اکستنشن (پلاگین) های مناسب، شما می توانید به راحتی یک محیط کاری ایده آل و شخصی برای خود در مرورگر کروم ایجاد کنید که باعث افزایش بهره وری شما می شود. اکستنشن هایی که در این مطلب معرفی می کنیم در دسته بندی های زیر قرار می گیرند:
- اکستنشن های فرانت ند
- لایو ادیتورها
- ولیدیتور و اجرا
- اکستنشن های اندازه گیری
- ابزارهای رنگ
- تستر فونت
- دیگر اکستنشن های مفید و کاربری
حالا وقت آن است به ترتیب همین لیست، بهترین پلاگین های طراحی سایت کروم در هر دسته بندی را معرفی کنیم.
بهترین اکستنشن های فرانت اند در کروم
MagiCSS
پلاگین یا اکستنشن MagiCSS یک ادیتور CSS لایو است که می توانید با ادیتوری که در آن قرار داده شده طراحی های CSS خود را زیبا سازی و مینیمالیستی کنید. همچنین این اکستنشن برای ساخت GitHub Gist نیز گزینه ای ایده آل است. از دیگر امکانات این پلاگین می شود به پیش نمایش تغییرات در کدهای CSS/Less/Sass، ذخیره خودکار فایل، تکمیل خودکار کد، تبدیل Less/Sass به CSS، ریلودر CSS و غیره اشاره کرد.
CSS DIG
اکستنشن CSS Dig یکی دیگر از پلاگین های طراحی سایت کروم در زمینه فرنت اند محسوب می شود. این اکستنشن می تواند استایل شیت ها و استایل بلاک های موجود در اکثر سایت ها را شناسایی و گروه بندی کند. با این قابلیت شما می توانید به راحتی کد ها را آنالیز کنید.
علاوه بر آن پلاگین CSS Dig می تواند تمام پراپرتیز های CSS شما را بررسی کند و میزان تکرار و انواع مدل های هر کدام از آن ها را نمایش دهد. همچنین اگر از سلکتور های طولانی یا تعداد زیادی ID استفاده کرده اید، این پلاگین به شما کمک می کند تا وضعیت را اصلاح کنید و همه چیز را مرتب نمایید. در این شرایط ساخت یک CSS جدید اصلا پیشنهاد نمی شود و بهتر است با استفاده از پلاگین های این چنین، مشکل را شناسایی و رفع نمایید.
CSSViewer
همانطور که از نام آن مشخص است، این اکستنشن برای نمایش اطلاعات مربوط به المان های CSS به کار میرود. ابزارها و اکستنشن های زیادی هستند که این کار را انجام می دهند اما پلاگین یا اکستنشن CSSViewer یکی از بهترین ها در این زمینه است. استفاده از CSSViewer خیلی راحت و سریع است. به شکلی که تنها کاری که لازم است انجام دهید این است که روی آیکون این اکستنشن در نوار ابزار کلیک کنید و سپس با نگه داشتن موس روی المان های مختلف موجود در یک صفحه، اطلاعات مربوط به آن را مشاهده کنید.
CSS-Shack
یکی دیگر از پلاگین های طراحی سایت کروم که در زمینه فرانت اند کاربرد دارد، اکستنشن CSS-Shack است. این اکستنشن به شما کمک می کند تا layers styles های متنوعی را خلق کنید (مانند همان کاری که با اپلیکیشن های ادیت و ویرایش تصویر انجام می دهید) و محصول نهایی را به شکل یک فایل واحد CSS تحویل بگیرید.
فتوشاپ تنها ابزاری نیست که می توانید با آن قالب طراحی کنید. در واقع هر طراح یا توسعه دهنده وب سایتی که در بخش فرانت اند کار می کند باید تسلط بالایی روی طراحی قالب های CSS داشته باشد. این اکستنشن به طراحان وب سایت کمک می کند تا قالب های مورد نظر خود را طراحی کنند و به راحتی آن را به شکل یک فایل CSS تحویل بگیرند. با این اکستنشن شما می توانید به سرعت دیزاین های مختلف، وایرفریم یا المان های ساده مانند دکمه ها را با چند کلیک بسازید.
CSS3 Generator
مورد بعدی در لیست اکستنشن های طراحی سایت کروم اکستنشن CSS3 Generator است. کاربرد این اکستنشن نیز از نام آن مشخص است. با CSS3 Generator شما می توانید تمام کد های مورد نیاز برای CSS خود را تولید کنید.
CSS Shapes Editor
اکستنشن CSS Shapes Editor جزو اکستنشن یا پلاگین هایی است که در Chrome DevTools به شکل پیش فرض نیز قرار دارد. این پلاگین برای ویرایش لایو property values در برگه های CSS کاربرد دارد.
اکستنشن های لایو ادیتور در کروم
WordPress Style Editor
با پلاگین WordPress Style Editor شما می توانید به شکل لایو استایل شیت های وردپرس خود را بررسی کنید و مستقیما تغییرات لازم را روی CSS قالب سایت اعمال کنید.
پلاگین های ولیدیتور و اجرا در کروم
Perfmap
اولین مورد از پلاگین های طراحی سایت کروم در بخش ولیدیتور و اجرا، اکستنشن Perfmap است. این پلاگین یا همان اکستنشن یک هیت مپ از عملکرد فرانت اند سایت ایجاد می کند. در این هیت مپ شما می توانید زمان بندی منابعی که در مرورگر بارگذاری می شوند را به وسیله Resource Timing API مشاهده کنید.
Validity
اگر به دنبال اکستنشنی هستید که به کمک آن بتوانید هر صفحه ای را در وب اعتبار سنجی یا ولیدیت کنید، پلاگین Validity گزینه پیشنهادی ما به شما است. در قسمت نوار ابزار این اکستنشن کروم به شما تعداد ارورهای موجود در یک صفحه نشان داده می شود و از طریق صفحه کنسول نیز می توانید جزئیات مربوط به هر ارور را مشاهده کنید.
برای مشاهده ارورها و جزئیات آن ها حتی لازم نیست که صفحه مرورگر را ترک کنید. تنها کافی است روی آیکون این اکستنشن در نوار ابزار کروم کلیک کرده تا اطلاعات مورد نظر به شما نمایش داده شود. همچنین این اکستنشن به شما امکان می دهد تا نسخه شخصی خودتان از W3C Validation Service را در کروم استفاده کنید.
Visual Inspector
مورد بعدی در لیست پلاگین های طراحی سایت کروم اکستنشن Visual Inspector است. این اکستنشن قابلیت های خاص و فوق العاده ای ندارد اما برای طراحان وب سایت می تواند بسیار کاربردی باشد. دلیل آن این است که با کمک Visual Inspector شما می توانید تغییرات و ادیت های فوری و موقتی را روی وب سایت انجام دهید بدون این که لازم باشد حتی یک خط کد بنویسید.
Web Developer Checklist
یکی از ضروری ترین و بهترین پلاگین های طراحی سایت کروم پلاگین Web Developer Checklist است. داشتن این پلاگین برای هر طراح وب سایتی واجب است چرا که می تواند به راحتی تخلف ها و ارورهای مختلف را به شکل هوشمند به شما نشان دهد. با کمک این اکستنشن می توانید خیلی زود تشخیص دهید که در چه قسمت از وب سایت چه بخشی دچار مشکل شده و آن را برطرف نمایید. همچنین این اکستنشن یک پلاگین همراه نیز دارد که می توانید از این لینک آن را تهیه کنید.
Bootlint This Page
یکی دیگر از اکستنشن های عیب یابی در کروم اکستنشن Bootlint This Page است. با استفاده از این اکستنشن شما ابزار Bootlint را به مرورگر خود اضافه می کنید. این ابزار به شکل خودکار صفحات وب را اسکن می کند و ارورهای رایج Bootstrap را شناسایی و مشخص می نماید. بعد از نصب و فعال سازی این اکستنشن خواهید دید که یک دکمه Bootlint This Page به مرورگر شما اضافه می شود. با یک کلیک روی این دکمه یک اسکریپت bootlint.js برای صفحه ای که در آن هستید اجرا می شود.
اگر اروری شناسایی و پیدا شود bootlint.js یک هشدار جاوا اسکریپت تولید می کند و سپس ارورها در پنجره کنسول جاوا اسکریپت نمایش داده می شوند. برای مشاهده این ارور ها فقط کافی است که دکمه F12 را فشار دهید تا ابزار دولوپر نمایش داده شود و سپس روی صفحه کنسول کلیک کنید.
Check My Links
یکی از مشکلات کلافه کننده در طراحی سایت وجود لینک های خراب یا Broken Links است. برای شناسایی و رفع این لینک ها، اکستنشن Check My Links همه چیزی است که به آن نیاز دارید. کار اصلی این اکستنشن چک کردن تمام لینک های موجود در یک صفحه وب است. این اکستنشن تمام لینک هایی که در صفحه مورد نظر شما وجود دارد را زیر و رو می کند و هم لینک های سالم و هم لینک های خراب را نشان می دهد.
هدف از ساخت و توسعه این پلاگین کمک به طراحان وب سایت، توسعه دهندگان وب سایت و ویراستاران محتوا در وب بوده است. سرعت عمل این اکستنشن بسیار بالا است و کار با آن نیز خیلی راحت. بعد از چک کردن لینک های موجود در یک صفحه، خواهید دید که لینک های سالم با رنگ سبز و لینک های خراب با رنگ قرمز مشخص می شوند.
شما حتی می توانید تمام لینک های خراب را با فقط یک کلیک کپی کنید. کد های ریسپانس HTTP و URL کامل لینک های خراب نیز در Console log قابل مشاهده هستند (برای مشاهده کنسول لاگ به مسیر Chrome > Tools > Javascript Console بروید و یا می توانید دکمه های Ctrl+Shift+J را بزنید).
پلاگین اندازه گیری برای طراحی سایت در کروم
Dimensions
یکی دیگر از اکستنشن های ساده اما کاربردی برای طراحان سایت در کروم، اکستنشن Dimensions است. این اکستنشن برای اندازه گیری ابعاد صفحه طراحی شده است که برای هر طراح وب سایتی می تواند مفید باشد. پلاگین Dimensions می تواند ابعاد و فواصل را از نشانگر موس تا لبه تصویر در جهت های بالا، پایین، چپ و راست اندازه بگیرد؛ بنابراین شما می توانید به راحتی با این پلاگین فاصله بین المان های طراحی در یک صفحه از وب سایت را اندازه بگیرید.
البته لازم به ذکر است که این پلاگین نمی تواند با بعضی از تصاویر و عکس ها به خوبی کار کند. دلیل آن این است که در تصاویر از هر پیکسل تا پیکسل بعدی مدام رنگ تغییر می کند و دقت اندازه گیری کاهش می یابد.
به غیر از آن، شما می توانید فاصله بین تمام المان های HTML مانند دکمه ها، آیکون ها، متن، گیف، ویدئو و غیره را محاسبه کنید. به طور خلاصه تقریبا همه چیزهایی که در مرورگر دیده می شوند توسط این اکستنشن قابل اندازه گیری هستند. همچنین برای اندازه گیری محوطه های دایره ای شکل نیز می توانید از این اکستنشن کمک بگیرید و شعاع یک قسمت دایره ای از صفحه را به دست بیاورید.
اکستنشن های رنگ برای طراحی سایت در کروم
ColorZilla
پلاگین ColorZilla در اصل برای موزیلا فایرفاکس طراحی و توسعه داده شده بود اما با توجه به استقبال زیاد کاربران و ثبت آمار بیش از پنج میلیون دانلود، بعد از مدتی نسخه کروم آن نیز به بازار آمد. این پلاگین تقریبا تمام امکانات لازم در زمینه طراحی رنگ در وب سایت را در اختیار شما قرار می دهد. ابزارهایی مانند Eyedropper, Color Picker, Gradient Generator از جمله ابزار های ColorZilla هستند.
با ColorZilla شما می توانید یک نقطه رنگ را از هر قسمتی ار مرورگر بردارید، به سرعت و به راحتی آن را ویرایش کنید و سپس در یک برنامه دیگر از آن استفاده کنید. همچنین می توانید پالت رنگ اختصاصی برای یک وب سایت که در حال طراحی آن هستید درست کنید. این اکستنشن قابلیت برداشتن رنگ از تقریبا هر پیکسلی و در هر شرایطی را دارد. میانبرهای کیبوردی آن باعث شده اند تا سرعت عمل طراحی با آن بالا باشد و رابط کاربری ایده آلی را در اختیار طراحان سایت قرار دهد.
Color Tab
یکی از جذاب ترین و بهترین اکستنشن های طراحی سایت کروم پلاگین Color Tab است. این اکستنشن به شما ایده های متنوعی برای طراحی سایت با رنگ های متنوع می دهد. به این شکل که هر بار که یک تب جدید را باز کنید، یک تم جدید از رنگ ها نمایش داده می شود.
اکستنشن های Type Playgrounds & Font Testers برای کروم
Fontface Ninja
یکی از بهترین پلاگین های طراحی سایت کروم که باعث افزایش سرعت کار شما در طراحی سایت می شود، پلاگین Fontface Ninja است. با کمک این پلاگین شما می توانید هر فونتی را از هر وب سایتی شناسایی کنید و آن ها را بوکمار کنید. سپس می توانید به شکل آزمایشی از آن ها استفاده کرده و اگر مایل بودید فونت مورد نظر را خریداری نمایید.
نحوه شناسایی فونت ها به وسیله این پلاگین بسیار ساده و سریع است. با انتخاب هر فونتی در یک صفحه از وب، می توانید نام فونت انتخاب شده و اطلاعات CSS آن را مشاهده کنید. همچنین Fontface Ninja این قابلیت را دارد تا تمام فونت های استفاده شده در یک وب سایت را به شکل خلاصه معرفی کند.
TypeWonder
یک پلاگین کاربردی دیگر در زمینه طراحی فونت در وب سایت ها، پلاگین TypeWonder است. این پلاگین به شما امکان می دهد تا روی هر سایتی که می خواهید، فونت های مختلف و متنوع را امتحان کنید. تنها کافی است آدرس سایت مورد نظر را در کادر آن وارد کنید و بلافاصله پیش نمایشی از فونت های مختلف را ببینید.
دیگر اکستنشن های مفید و کاربری برای طراحی سایت در کروم
45to75
پلاگین 45to75 یک پلاگین شمارشگر است که به شما کمک می کند به بهینه ترین شکل ممکن از خطوط خود در سایت استفاده کنید. این پلاگین طول خطوط را بین ۴۵ تا ۷۵ کاراکتر نگه می دارد. طراحان وب سایت با استفاده از این پلاگین مطمئن خواهند بود که طول خطوط مطابق با استاندارد های تعیین شده باقی خواهد ماند و نظم صفحه حفظ می شود.
البته هر فونت و طرحی شکل منحصر به فردی دارد و نمی شود یک عدد ثابت را برای همه در نظر گرفت. به همین دلیل شما به عنوان طراح وب سایت باید خودتان تشخیص دهید که در پروژه فعلی و با فونتی که انتخاب کرده اید، در هر خط چند کاراکتر می تواند قرار بگیرد؛ اما یک اصل و قاعده کلی بین طراحان وب سایت در این زمینه وجود دارد که به آن اصل 45to75 می گویند؛ یعنی بهتر است طول هر خط بین ۴۵ تا ۷۵ کاراکتر باشد.
با پیروی از این قاعده صفحات شما همیشه و در هر شرایطی خوانا خواهند بود و تجربه کاربری مثبتی را برای بیننده رقم می زنند. شما می توانید متن مورد نظر خود را انتخاب کنید و با یک راست کلیک تعداد کاراکتر های آن را مشاهده کنید.
PerfectPixel
پلاگین PerfectPixel نیز جزو پلاگین هایی است که می تواند در حین طراحی یک سایت بار بزرگی را از روی دوش شما بردارد و کمک کند تا با سرعت و دقت بیشتری کار طراحی را پیش ببرید. پلاگین PerfectPixel به طراحان سایت امکان می دهد تا یک تصویر نیمه شفاف را روی صفحه HTML
در حال طراحی قرار دهند و با مقایسه این دو صفحه، کار طراحی را با دقتی در حد پیکسل به پیکسل پیش ببرند. از قابلیت های این پلاگین کاربردی می شود به این موارد اشاره کرد:
- پشتیبانی از چندین لایه روی هم
- پشتیبانی از مقیاس بندی و وارونگی
- امکان استفاده از چند لایه جداگانه روی چند سایت
- رابط کاربری ساده و مینیمالیستی
- پشتیبانی از آپلود فایل به شکل درگ اند دراپ، کپی پیست کردن URL، پیست کردن از کلیپ برد
- پشتیبانی از اسکرول موس و جهت نماهای کیبرد
- پشتیبانی از فایل لوکال (file:// scheme)
ZenHub
برای هر طراح وب سایت یا دولوپری استفاده از یک ابزار مدیریت پروژه ضروری و غیر قابل چشم پوشی است. پلاگین ZenHub یک پلاگین مدیریت پروژه است که درون گیت هاب کار می کند. این پلاگین با پشتیبانی از قابلیت هایی مانند وظایف drap-drop و ساخت لیست کارهای در دست انجام، در وقت شما صرفه جویی کرده و باعث افزایش بهره وری شما در گیت هاب می شود.
Minimalist Markdown Editor
یکی دیگر از کاربردی ترین پلاگین های طراحی سایت کروم، پلاگین Minimalist Markdown Editor می باشد که اجازه می دهد تا سینتکس Markdown را حین تایپ مشاهده کنید. سپس می توانید بلافاصله Markdown را به HTML تبدیل کنید. این پلاگین یکی از ساده ترین و روان ترین ادیتور های Markdown به حساب می رود و از محبوبیت بالایی بین طراحان وب سایت برخوردار است.
fb-flo
این پلاگین کاربردی و مفید توسط فیسبوک توسعه داده شده است. پلاگین fb-flo یک اکستنشن کروم است که اجازه می دهد تا اپلیکیشن های در حال اجرا را بدون آن که لازم باشد آن ها را ببندید ادیت و ویرایش کنید. شما می توانید به شکل لایو جاوا اسکریپت، CSS، عکس ها و تصاویر و یا هر منبع استاتیک دیگری را ادیت کنید.
Web Developer
ممکن است نام این پلاگین شما را گمراه کند و فکر کنید که اکستنشن Web Developer صرفا برای توسعه دهندگان وب یا همان دولوپر ها مناسب است و برای طراحان وب سایت ساخته نشده؛ اما این تصور اشتباهی است. پلاگین Web Developer یکی از محبوب ترین پلاگین ها هم در کروم و هم در فایرفاکس است.
این پلاگین دریایی از ابزارهای به شدت مفید و کاربردی را به مرورگر شما اضافه می کند که هم دولوپر ها و هم دیزاینر ها به آن احتیاج دارند. حتی ممکن است در این پلاگین ابزارهایی را برای اولین بار ببینید که به شما کمک می کنند تا کار طراحی سایت برای شما راحت تر از همیشه شود.
MySQL Admin
بعید است که یک طراح سایت حرفه ای باشید اما با پلاگین MySQL Admin آشنا نباشید و از آن استفاده نکنید. با این حال نمی شود حرف از بهترین پلاگین های طراحی سایت کروم زد و از MySQL Admin نام نبرد. این پلاگین یک اکستنشن قدرتمند برای کروم است که به شما کمک می کند تا دیتابیس های MySQL راحت تر از قبل مدیریت کنید.
جمع بندی
گوگل کروم شناخته شده ترین و پر استفاده ترین مرورگر در سطح جهان به حساب می رود. این فقط به دلیل برند گوگل نیست بلکه کروم توانسته خود را به عنوان یک پیشرو در بازار مرورگر های اینترنتی معرفی کند و با ارائه امکانات و ابزارهای قدرتمند نیاز کاربران خود را رفع کند.
سرعت بالا، قابلیت مقیاس بندی، قدرت اجرای بالا و امکاناتی مانند Developer Tools باعث شده اند تا طراحان وب سایت و دولوپرهای وب سایت کروم را به مرورگر اصلی خود تبدیل کنند و بخش عمده ای از کار خود را در آن انجام دهند.
اما این پایان کار نیست. شما می توانید حتی گوگل کروم قدرتمندتر و مجهزتری داشته باشید و این کار با استفاده از پلاگین یا همان اکستنشن های کروم به راحتی ممکن شده است.
برای مثال اکستنشن هایی که در این مطلب معرفی شده اند، می توانند کار طراحی سایت را برای هر دیزاینری راحت تر و سریع تر از قبل کنند. شما نیز می توانید با توجه به نیازها و سلیقه شخصی خود پلاگین یا همان اکستنشن های مطلوب را از این لیست انتخاب کرده و از ابزارهای جدید و کارآمدی که به شما ارائه می کنند بهره مند شوید.
معرفی 1+10 افزونه گوگل کروم برای طراحان و توسعهدهندگان وب
مرورگر chrome یکی از محبوبترین مرورگرهای وب در جهان است. این مرورگر در فروشگاه خود هزاران برنامه افزودنی دارد که میتوانید با استفاده از آنها عملکرد مرورگر خود را گسترش دهید. این افزونهها برای افزایش بهرهوری، بهبود عملکرد و آسانتر کردن کار توسعهدهندگان وب و طراحان فراهم شده است. در این مقاله به معرفی کاربردیترین افزونههای google chrome میپردازیم.
چگونه میتوان افزونههای مرورگر کروم را دانلود و نصب کرد؟
شما میتوانید برای نصب افزونههای google chrome بر روی آیکون سه نقطهای که در گوشه سمت راست مرورگر است کلیک کنید. در منوی باز شده بر روی گزینه more tools رفته و گزینه extensions را انتخاب کنید.
در صفحه باز شده، افزونههای نصب شده بر روی گوگل کروم خود را مشاهده میفرمایید. برای حذف یا غیر فعال کردن هر یک از افزونهها میتوانید بر روی گزینه مربوط به آن کلیک کنید.
برای دانلود و نصب افزونه موردنظر خود در قسمت بالای صفحه، گوشه سمت چپ، بر روی آیکون extensions کلیک کرده و گزینه open chrome web store را انتخاب نمایید.
حال میتوانید در فروشگاه وب کروم، افزونهی مورد نظر خود را با توجه به کتگوری، امکانات و رتبهبندی سرچ کرده و به مرورگر خود اضافه کنید. افزونهها بعد از اضافه شدن به مرورگر، در بالای صفحه مرورگرتان در کنار فیلد url قرار میگیرند.
معرفی افزونههای ضروری google chrome
اگر به برخی از ابزارهای مفید برای سرعت بخشیدن، همکاری و یا بهبود پروژههای توسعه وب خود نیاز دارید، فروشگاه وب Chrome ابزارهای زیادی دارد. این لیست شامل برخی از محبوب ترین و کاربردیترین افزونههای رایگان Chrome است که هر کاربر که کار طراحی، سئو و توسعه وب انجام میدهد باید در کیف ابزار خود داشته باشد!
۱۱- forget me
با کلیک بر روی این افزونه، دیگر هیچکس نمیداند از آن وبسایت بازدید کردهاید!
این افزونه به شما این امکان را میدهد که هر چیزی مربوط به وبسایتی که بازدید کردهاید را حذف کنید. کوکیها، تاریخچه، local storage، حافظه جانبی و …. را با کلیک بر روی این افزونه در کمتر از یک ثانیه میتوانید حذف کنید.
۱۰- wapplayzer
این افزونه ابزاری است که به کمک آن میتوانید فناوریهای مورد استفاده در وبسایت موردنظرتان را کشف کنید. wappalyzer سیستمهای مدیریت محتوا، سیستمعاملهای تجارت الکترونیکی، چارچوبهای وب، نرم افزار سرور، ابزارهای تحلیلی و بسیاری از موارد دیگر را شناسایی و به شما معرفی میکند.
چطور میتوانیم افزونههای استفاده شده در یک وبسایت وردپرسی را شناسایی کنیم؟
۹- measure dimensions
ابزاری برای طراحان که میتوانند با کلیک بر روی آن ابعاد صفحه نمایش خود را اندازهگیری کنند.
تصاویر، فیلدهای ورودی، دکمه ها، فیلم ها، gif ها، متن، آیکون ها و… و هر آنچه را که در مرورگر مشاهده می کنید، را میتوانید اندازه گیری کنید. این افزونه با میانبر ALT + D شروع و متوقف میشود.
۸- Font Scanner
شاید برای شما هم پیش اومده باشد که وارد وبسایتی شوید و فونت استفاده شده در آن سایت، نظر شما را جلب کند. این افزونه تقریباً هر فونتی در هر صفحه وب را سریع تجزیه و تحلیل میکند. فقط کافی است روی گزینه اسکن کلیک کنید.
۷- MozBar
با استفاده از این افزونه می توانید عملکرد رقبای خود را بسنجید و در استراتژی سئو سایت خود بهکار بگیرید. نصب این افزونه به شما این امکان را میدهد که بتوانید DA وPA آن سایت را مشاهده کنید. اگر میخواهید بدانید DA و PA یک سایت چیست؟ میتوانید به مقاله زیر مراجعه کنید:
۶- ColorPick Eyedropper
ColorPick Eyedropper یک ابزار انتخاب رنگ ساده است که به شما امکان میدهد مقادیر رنگ موردنظر خود را با فرمتهای مختلف از هر صفحه وب انتخاب و بدست آورید.
۵- Alexa Traffic Rank
با استفاده از افزونه alexa میتوانید رتبه وبسایت خود را در کشور خود و جهان توسط رتبهبندی الکسا مشاهده کنید. رتبه الکسا یک رتبهبندی است که محبوبیت هر وبسایت را مشخص میکند.
رتبهبندی الکسا چیست؟ و معیار رتبهبندی آن چیست؟
۴- One Click Full Page Screenshot
زمانی که شما قصد ایجاد اسکرینشات از صفحات وب موردنظر خود را داشته باشید و آن صفحه وب دارای اسکرول باشد، دیگر استفاده از دکمه کیبورد “Prt Sc Sys Rq” کافی نیست. شما با استفاده از این افزونه بهسادگی میتوانید از صفحات وب موردنظر خود، اسکرینشات تهیه کنید. همینطور میتوانید در همان لحظه اسکرینشات خود را ویرایش و ارسال کنید.
۳- Google Translate
هنگام مرور صفحه وبی ممکن است به کلمهای برخوردهاید که ترجمه و معنی آن را نمیدانید. با نصب افزونه Translate میتوانید با انتخاب و برجسته کردن آن کلمه، ترجمه آن را در کنار آن ببینید. همچنین اگر به وبسایتی به زبانی دیگری برخوردید با استفاده از این افزونه میتوانید کل صفحه وب را ترجمه کرده و از آن استفاده کنید.
۲- Google Mail Checker
این افزونه تعداد پیامهای خوانده نشده را در صندوق ورودی Google Mail خود نشان میدهد. همچنین میتوانید روی دکمه کلیک کنید تا صندوق ورودی خود را باز کنید.
۱- Web Developer
افزونه وب دولوپر، طیف گستردهای از ابزارها را برای طراحان و همچنین توسعهدهندگان ارائه میدهد. اگر هنوز از این برنامه افزودنی Chrome استفاده نکردهاید و یک توسعهدهنده وب هستید، مطمئن هستیم که بعد از نصب آن هرگز آن را از نوار ابزار خود حذف نمیکنید. زیرا کاربردیترین افزونهای است که تابهحال به آن برخوردهاید!
کار با این افزونه شامل:
- غیرفعال کردن هر نوع استایلی ( مرورگر پیشفرض، embedded ،inline and linked و غیره)
- نمایش استایل پرینت
- غیرفعال کردن تصاویر ، یافتن تصاویر خرابشده و نمایش آدرسهای تصویر و …
- تغییر، ویرایش و حذف کوکی موردنظر
- و بسیاری از امکانات دیگر
در حالی که Dev Tools مرورگر کروم به شما امکانات خوبی را برای توسعه و طراحی وبسایت می دهد اما با اضافه کردن افزونه ها می توانید کارایی مرورگر خود را بیشتر افزایش دهید، این حالت زمانی ارزش بیشتری نیز پیدا می کند که بدانید این افزونه ها رایگان هستند.
براساس نیازتان و با انتخاب افزونه های بسیار عالی شما می توانید در جهت بهتر کردن محصول خودتان محیط کاریتان را شخصی سازی کنید.
۲۵ افزونه ای که امروز برای شما قرار داده ایم از دسته بندیهای زیر انتخاب شده اند:
Frontend Extensions, Live Editors, Validators & Performance, Measuring Extensions, Color Tools, Type Playgrounds & Font Testers and Useful Utility Extensions.
افزونههای کاربری کروم برای فرانت-اند
SnappySnippet
SnappySnippet یک ابزار توسعه است که به صورت افزونه درآمده و با آن می شود کدهای HTML و CSS مربوط به یک زیردرخت DOM را استخراج کرد و آن را به وبسایت هایی مانند CodePen، jsFiddle و JS Bin فرستاد.
MagiCSS
MagiCSS یک ویرایشگر سیاساس زنده است که در داخل خود نیز از یک ویرایشگر بهره میبرد. جدای از نمایش کدهای سیاساس این افزونه میتواند آنها را زیبا و کوچک سازد. این افزونه قابلیت ساخت GitHub Gist را نیز به شما می دهد.
CSS Dig
CSS Dig به شما این قابلیت را می دهد تا بتوانید فایل های استایلشیت را پیدا کرده و آن ها را گروه بندی کنید. این امکان برای افرادی که قصد دارند تا آنالیز کلی روی یک وبسایت از نظر طراحی داشته باشند بسیار راه حل خوبی است.
CSSViewer
افزونه های بسیار زیاد دیگری نیز وجود دارند که درست کارایی شبیه به افزونه CSSViewer را ارائه میدهند. یحتمل بعضی از آنها نیز بهتر عمل می کنند. اما این افزونه تفاوت ها کلیدی که دارد ساده بودن آن است. هم در استفاده و هم در کارایی. تنها کافی است روی آیکون آن در نوار ابزار کلیک کنید و ماوس را روی المنتی که میخواهید اطلاعات پیدا کنید، هاور نمایید. به همین سادگی اطلاعاتی راجع به المنت ها را پیدا میکنید.
CSS-Shack
CSS-Shack افزونهای است که به شما اجازه می دهد استایل های لایه بندی شده را درست کنید (درست مانند برنامه های ویرایش تصویر) و آن ها را در یک فایل سیاساس خروجی بگیرید.
CSS3 Generator
همانطور که از نام CSS3 Generator پیدا است این افزونه برای تولید کردن کدهای سیاساس به کار برده می شود.
CSS Shapes Editor
CSS Shapes Editor یک ادیتور آنلاین ساده برای ویرایش سریع خاصیت ها و مقادیر اشکال داخل صفحه وب است.
WordPress Style Editor
با استفاده از افزونه WordPress Style Editor می توانید استایل های مربوط به قالب خود را در وردپرس تغییر دهید و تغییرات را به صورت مستقیم در صفحه اعمال نمایید.
PageEdit
PageEdit باعث می شود که صفحه مرورگر شما به یک ادیتور HTML در حالت WYSIWYG تبدیل شود و با آن بتوانید هر صفحه ای را ویرایش کنید.
Perfmap
Perfmap افزونه ای که برای شما یک نقشه از وبسایت درست می کند و به شما می گوید که چه بخش هایی از وبسایت در چه بازهای از زمان لود می شود. اینکار با استفاده از Resource Timing API انجام می شود.
Validity
Validity یک افزونه پرکاربرد است و به شما اجازه می دهد تا هر صفحه وبی را اعتبار سنجی بکنید. این افزونه تعداد خطاها را به صورت تول تیپ نمایش می دهد و جزئیات مربوط به خطاها را در قسمت کنسول مرورگر مینویسد.
Visual Inspoector
Visual Inspector یک افزونه کروم است که به طراحان این قابلیت را می دهد بدون احتیاج به کدنویسی تغییرات موقتی را در وبسایت ایجاد کنند.
Web Developer Checklist
Web Developer Checklist یکی از محبوب ترین افزونه هایی است که برای اعتبار سنجی و تشخیص خطاها در صفحات وب استفاده می شود. جدای از محبوبیت افزونه، توانایی خوبی نیز در تشخیص خطاهای مختلف را داراست.
Bootlint This Page
با نصب کردن این افزونه یک دکمه Bootlint This Page به مرورگرتان اضافه می شود که با آن می توانید تمام خطاهای مربوط به صفحات و وبسایت هایی که با استفاده از بوت استرپ ساخته شده اند را در صفحه کنسول مرورگرتان مشاهده کنید.
Check My Links
افزونه Check My Links صفحات شما را بررسی می کند و تمام لینک های استفاده شده در آن را زیر نظر می گیرد و در نهایت لینک هایی که به درستی قرار گرفته اند را با رنگ سبز و لینک های شکسته را با رنگ قرمز نشان میدهد. هیچکس لینک های شکسته دوست ندارد.
Page Ruler
با استفاده از افزونه Page Ruler می توانید در صفحه وبتان یک خط کش داشته باشید و ارتفاع، عرض و موقعیت مورد نظرتان را با آن خط کشی نمایید.
Dimensions
Dimensions یک افزونه بسیار ساده اما کارآمد است که ارتفاع و عرض صفحه نمایشتان را اندازه گیری می کند.
ColorZilla
این افزونه در اصل برای مرورگر فایرفاکس درست شده است. ColorZilla به شما ابزارهای مختلفی را برای استفاده از رنگ در مرورگرتان ارائه می دهد. ابزارهایی مانند color picker، eyedropper، pallette viewer و gradient generator.
Color Tab
هر بار که شما پنجره جدیدی را باز می کنید افزونه Color Tab به شما طرح رنگی زیبایی را نشان میدهد.
Fontface Ninja
افزونه Fontface Ninja به شما اطلاعات لازم راجع به فونت های داخل صفحه را می دهد. اطلاعاتی مانند نام فونت، اندازه آن و حتی فاصله بین خطوط داخل طراحی. بعد از شناسایی فونت می تواند آن را یافته و در طرحتان استفاده کنید.
Font Playground
Font Playground به شما اجازه میدهد تا تمام فونت های گوگل را به صورت زنده در صفحه وب خود استفاده کنید و آن ها را آزمایش نمایید.
TypeWonder
افزونه TypeWonder به شما اجازه می دهد تا صفحه وبی که در نظر دارید را در قالب وب فونت های مختلف مشاهده کنید. تنها کافی است تا آدرس وبسایت را نوشته و بعد از روی GO! کلیک کنید.
Responsive Web Design Tester
Responsive Web Design Tester یک افزونه بسیار ساده است که به شما اجازه می دهد تا به سادگی و سرعت وبسایتتان را در دستگاه های مختلف موبایل امتحان کنید. این کار برای آزمایش میزان واکنشگرا بودن وبسایتتان بسیار کمک می کند.
45to75
برای مطمئن شدن از میزان متن ها و تعداد کاراکترهای شما در دستگاه های مختلف می توانید از افزونه 45to75 استفاده کنید. 45To75 کاراکترهای شما را در بین ۴۵ تا ۷۵ قرار می دهند و سعی می کنند اندازه خطوط را بهینه نگه دارند.
PerfectPixel
PerfectPixel به شما اجازه می دهد تا بتوانید یک تصویر نیمهمحو از وبسایت را روی وبسایت خود (آخرین نسخه) قرار دهید و آنها را با همدیگر مقایسه نمایید. اینکار به لطف مقایسه پیکسلی به بهترین شکل انجام می شود.
ZenHub
ZenHub یک افزونه مدیریت پروژه برای گیتهاب است. این افزونه برای بهتر کردن پروژه هایتان در گیتهاب ویژگی های بسیار ساده اما کارآمدی را ارائه خواهد کرد. ویژگی مانند drap-drop task boards و لیست های to-do.
Instant Wireframe
چه کسی یک نمونه اولیه زیبا را نمیخواهد؟ افزونه Instant Wireframe شما را قادر می سازد تا برای پروژه های خود در هر صفحه ای نمونه های اولیه بسازید. یکی از ویژگی های خوب این افزونه کار کردن در حالت لوکال است.
Minimalist Markdown Editor
افزونه Minimalist Markdown Editor یک ادیتور ساده است که کدهای شما را آنچنان که نوشتهاید به سرعت نمایش میدهد. به سادگی می توانید کدهای Markdown خود را نیز به HTML تبدیل کنید.
Fb-flo
Fb-flo یک افزونه کروم است که توسط فیسبوک ساخته شده و به شما اجازه می دهد تا کدهای در حال اجرایتان را بدون نیاز به رفرش کردن اپ ویرایش کنید. شما در این افزونه می توانید سیاساس، جاوا اسکریپت، تصاویر و هر مورد استاتیکی را تغییر دهید.
Web Developer
اگر تا به حال از Web Developer استفاده نکردهاید پس از خودتان باید بپرسید چرا؟! این افزونه یکی از محبوبترین افزونه های مرورگرهای کروم و فایرفاکس به حساب می آید. این افزونه به مرورگرتان ویژگی های بسیار زیبا و کارآمدی را اضافه میکند که هر توسعه دهندهای به آنها نیازمند است. مطمئن پس از استفاده این افزونه متوجه می شوید که خیلی موارد وجود داشته که نمی دانستید وجود دارند اما به آنها نیاز داشته اید.
MySQL Admin
MySQL Admin یک افزونه بسیار خوب کروم است که کار مدیریت بانک های اطلاعاتی MySQL را از همیشه برایتان آسانتر می کند.
اتمام!
اگر قصد دارید تا راجع به ابزارهای توسعه کروم اطلاعات بیشتری نیز پیدا کنید می توانید به صفحه DevTools Tips مراجعه کنید. این وبسایت پر از اطلاعات، نکات و تکنیک هایی است که با آنها می توانید بهترین کاربردها را از ابزار توسعه گوگل کروم دریافت کنید. اگر از دسته طراحان و توسعه دهندگانی هستید که می خواهید همه چیزهای جدید را تجربه کنید پس پیشنهاد می کنم حتما افزونه های Muzli و Panda را مشاهده کنید. آنها به شما خبرهای تازه این صنعت را میدهند.
معرفی ۸ افزونه کاربردی کروم برای طراحان سایت و توسعه دهندگان وب
همانطور که میدانید طراحان و توسعه دهندگان وب هم مانند سایر افراد فعال در حوزههای مختلف، به ابزاهایی نیاز دارند تا بتوانند کارهای خودشان را خیلی سریعتر و با کیفیت بهتر به نتیجه برسانند.
در این پست قصد داریم در مورد 8 افزونه کاربردی کروم صحبت کنیم. مسلما افزونه های متعددی برای مرورگر گوگل کروم وجود دارد و روز به روز این افزونهها در حال افزایش هستند. بنابراین در صورتی که شما هم افزونههایی غیر از این 8 افزونه را میشناسید، لطفا در انتهای همین پست آن را به ما و سایر دوستان معرفی کنید.
1. افزونه گوگل کروم Muzli 2
یکی از نیازهای همیشگی طراحان و توسعهدهندگان وب این است که همیشه باید طرحهای ترند و حرفهای روز را مشاهده کنند و از آنها برای کارهای خودشان ایده بگیرند. با نصب این افزونه کاربردی گوگل کروم، جدیدترین طرحهای رابط کاربری و تجربه کاربری و همچنین اخبار و تصاویر دنیای وب در دسترس شما قرار میگیرد.
با مشاهده این طرح ها خودتان را به روز نگه دارید و ذهنتان را برای ایجاد رزومه حرفهایتر آماده کنید.
برای دانلود افزونه کروم Muzli2 اینجا کلیک کنید.
2. افزونه کروم WebFont
شاید بارها برای شما پیش آمده باشد که وارد سایتی بشوید و فونت استفاده شده در آن سایت، نظر شما را به خودش جلب کند. در حالت پیش فرض شما باید وارد سورس آن صفحه بشوید و در میان سورسهای css آن، فونت استفاده شده را شناسایی کنید. اما با نصب این افزونه کاربردی، به سادگی و تنها با یکی کلیک می توانید فونت استفاده شده در هر بخش از صفحه را شناسایی کنید.
برای دانلود افزونه کروم WebFont میتوانید از این لینک استفاده کنید.
3. افزونه CSSViewer گوگل کروم
این افزونه برای برنامه نویسان سمت کاربر یا اصطلاحا FrontEnd کاربرد زیادی دارد. با کلیک روی این افزونه و قرار دادن موس روی هر بخش از صفحه، استایلهای مربوط به آن بخش را مشاهده خواهید کرد.
برای دانلود افزونه کروم CSSViewer میتوانید از این لینک استفاده کنید.
4. افزونه کاربردی Full Page Screen Capture
احتمالا در بسیاری از مواقع شما قصد ایجاد اسکرین شات از صفحات وب را داشتهاید. زمانی که صفحه وب تمام صفحه نمایش شما را در بر گرفته باشد، تنها با فشردن کلید اسکرین شات کیبورد میتوانید از آن صفحه تصویر مورد نیاز را تهیه کنید. اما در اکثر مواقع، صفحات وب دارای اسکرول هستند و این باعث میشود که شما برای ایجاد اسکرین شات تمام صفحه با مشکل مواجه شوید!
با نصب این افزونه شما میتوانید به سادگی و تنها با یک کلیک، اسکریت شات تمام صفحه از صفحات وب را تهیه کنید و نگران اسکرولهای طولانی صفحات وب نباشید.
برای دانلود افزونه کروم Full Page Screen Capture اینجا کلیک کنید.
5. افزونه استخراج رنگ Eye Dropper
این افزونه به شما برای پیدا کردن کد رنگ وب سایتهای مختلف کمک میکند. راه حلی که ما تا قبل از آشنایی با این افزونه پیش میگرفتیم این بود که از صفحه یک اسکرین شات تهیه کنیم و آن را به نرم افزارهایی مثل فتوشاپ انتقال بدهیم و آنجا کد رنگ مورد نیازمان را استخراج کنیم! اما با در دسترس داشتن این افزونه، توانستیم در کمتر از چند ثانیه به کد رنگ هر بخش از سایت دسترسی پیدا کنیم و دیگر نیازی به استفاده از فوتوشاپ نداشتیم.
میتوانید برای دانلود افزونه کروم Eye Dropper از این لینک استفاده کنید.
6. افزونه کاربردی Spectrum
این افزونه میتواند در انتخاب رنگ مناسب برای صفحات وب، به طراحان سایت کمک زیادی کند. با نصب این افزونه روی مرورگر گوگل کروم خودتان، میتوانید به راحتی صفحات وب را در حالتهای رنگی مختلف مشاهده کنید.
برای دانلود افزونه کروم Spectrum اینجا کلیک کنید.
7. اکستنشن Site Palette گوگل کروم
این ابزار یکی از ابزارهای پر کاربرد و مهم برای طراحان رابط کاربری سایت به حساب میآید. با نصب این افزونه میتوانید پالت رنگی مورد استفاده در صفحات وب را استخراج کنید.
برای دانلود افزونه کروم Site Palette اینجا کلیک نمایید.
8. اکستنشن WebPaint برای طراحان
اگر قصد دارید همزمان با مشاهده صفحات وب، تغییراتی همچون رسم اشکال مختلف، خطوط و یا اضافه کردن متن به صفحات را داشته باشید، نصب این افزونه را به شما پیشنهاد میدهیم. همچنین این افزونه به شما این امکان را میدهد تا پس از اعمال تغییرات بر روی صفحه، از آن یک اسکرین شات تهیه کنید.
برای دانلود افزونه کروم WebPaint بر روی این لینک کلیک کنید.
حال که با ابزار های کاربردی گروگل کروم برای طراحان سایت آشنا شدید، میتوانید با مطالعه آموزشی های برنامه نویسی تحت وب، سطح دانش خود را در این زمینه مطالعه کنید.افزایش دهید.
از اینکه ما را تا انتهای این مقاله همراهی کردید سپاسگزاریم.
درقسمت نظرات، برای ما دربارهی تجربیات استفاده از این افزونه های کاربردی گوگل کروم بنویسید.
8 افزونه کاربردی کروم برای طراحان وب که باید بشناسید
1. Window Resizer
شاید یکی از مواردی که طراحان وب با آن زیاد سر و کار دارند، چک کردن وب سایت طراحی شده در سایزهای متفاوت برای بررسی سازگاری با ابزارهای مختلف باشد. این افزونه به شما کمک میکند تا اندازه مرورگر خود را به سایزهای از پیش تعریف شده تغییر داده و سایت خود را در این سایزها چک کنید. این سایزها قابل تعریف و تغییر بوده و همچنین می توانید از تنظیمات این افزونه خروجی گرفته و در سایر کامپیوترها از این تنظیمات استفاده کنید:
2. ColorPick Eyedropper
فرض کنید در حال مشاهده یک وب سایت هستید و از رنگ یکی از بخش های این سایت می خواهید در کار خود استفاده کنید. بوسیله این افزونه می توانید به صورت پیکسل به پیکسل اقدام به انتخاب رنگ و مشاهده کد Hex آن کنید:
3. Page Ruler
بوسیله افزوهه Page Ruler می توانید سایز المان های مختلف بر روی صفحات وب را مشاهده کنید. با انتخاب این ابزار از نوار بالای مرورگر کروم، با کشیدن یک کادر به دور قسمتی از صفحه که مد نظر شما می باشد، سایز آن قسمت به همراه موقعیت absolute آن بر روی صفحه، در زیر نوار آدرس به شما نمایش داده خواهد شد. همچنین پس از تعیین کادر، امکان جابجایی و تغییر اندازه آن را نیز خواهید داشت. همچنین در صورت فعال بودن حالت Element Mode می توانید با بردن نشان گر موس بر روی المان های صفحه، به صورت خودکار آن قسمت را انتخاب نمایید:
4. CSSViewer
فرض کنید صفحه ای را باز کرده و قصد دارید کد CSS مربوط به قسمتی از صفحه را مشاهده کنید. یک راه آن استفاده از قابلیت Developer Tools مرورگر کروم می باشد. اما اگر به دنبال راه ساده تری می گردید این افزونه کار شما را به سرعت راه خواهد انداخت. کافیست در نوار ابزار بالای مرورگر بر روی آیکون CSSViewer کلیک کرده و سپس با بردن نشان گر موس بر روی هر یک از المان های صفحه کد CSS مربوط به آن را مشاهده کنید:
5. Form Fuzzer
بوسیله این افزونه، می توانید فرم های صفحات وب سایت خود را با مقادیر مختلف و تصادفی پر کرده و اقدام به تست فرم ها نمایید. این مقادیر می توانند شامل مقادیر پیش بینی نشده، مقادیر ناصحیح و مقادیر تصادفی باشند که به صورت خودکار داخل فیلدهای فرم های صفحات قرار میگیرند. همچنین قابلیت تعریف کردن مقادیر پیش فرض در این افزونه وجود دارد. حتماً زمانی که وب سایتی را طراحی می کنید، فرم های صفحات خود را جهت اطمینان از صحت ورود اطلاعات تست کنید:
6. Site Spider
وب سایت شما یا سایتی که شما طراحی کرده اید، ممکن است حاوی لینک های بسیاری باشد. بوسیله این افزونه می توانید لینک های وب سایت مورد نظر را چک کرده تا از صحت کارکرد لینک ها اطمینان حاصل کنید. بوسیله این افزونه، امکان مشخص کردن یک وب سایت یا زیر مجموعه های آن به همراه اعمال فیلترهای مختلف جهت بررسی لینک ها وجود دارد. دقت کنید که عملیات بررسی مبتنی بر دسترسی شما به وب سایت داخل مرورگر و بر اساس کوکی ها انجام خواهد شد.
7. Scraper
با کمک این افزونه می توانید بر روی بخش از صفحه راست کلیک کرده و سپس گزینه Scrape Similar را کلیک کنید، با این کار، پنجره ای باز شده و لیستی از موارد مشابه با ساختار قسمت انتخاب شده در صفحه به صورت یک جدول به شما نمایش داده خواهد شد:
8. User-Agent Switcher
زمانی که شما از وب سایتی بازدید می کنید اطلاعاتی از سمت شما با نام User Agent برای سرور ارسال می شود. این اطلاعات شامل پلاتفرم مورد استفاده برای مشاهده وب سایت می باشد. بوسبله این افزونه شما قادر به تغییر User Agent برای مشاهده وب سایت خواهید بود. یکی از کاربردهای این افزونه برای وب سایت های داینامیکی که برای موبایل و دسکتاپ نسخه های جداگانه ای طراحی می کنند می باشد:
در این لیست سعی کردم افزونه هایی با بیشترین کاربرد را خدمت دوستان معرفی کنم. افزونه های دیگری نیز وجود دارند مانند EditThisCookie و JSONView که در زمینه مشاهده و ویرایش کوکی ها و فایل های JSON کاربرد دارند. شما از چه ابزارهایی برای انجام طراحی های خود استفاده می کنید؟