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

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

۳۵ Chrome Extensions And Apps For Developers

افزونه ها و اپلیکیشن های کاربردی گوگل کروم

 

در این مقاله، ۳۵ تا از بهترین و کاربردی ترین افزونه ها (Extensions) و اپلیکیشن های قابل نصب بر روی مرورگر کروم را معرفی می کنیم که برای برنامه نویسان و طراحان وب مفید می باشد. این افزونه ها کارهای گوناگونی انجام می دهند. از قبیل: تست http request و گرفتن اسکرین شات های زیبا و…

 

 ابزارهای طراحی (Design Tools) 

 

۱- ابزار تصویر (Image Tools):

 

ابزار تصویر (Image Tools)

 

Imagetool یک اپلیکیشن برای مرورگر کروم می باشد که به طراحان کمک می کند تا المان های صفحات وب را راحت تر مشاهده کنند و بفهمند. این ابزار یک helper خوب برای تبدیل طراحی (Design) به کدهای HTML می باشد.

 

۲- CSS-Shack:

ابزار CSS-Shack یک اپلیکیشن موجود در گوگل کروم می باشد که توسط آن می توانید طراحی موردنظر را بصورت بصری (Visual) ایجاد نمائید و در نهایت آنرا به کدهای CSS تبدیل کنید. از این اپلیکیشن می توانید برای نوشتن و نگهداری و ویرایش استایل های وب سایت خود استفاده کنید. دارای امکاناتی نظیر ایجاد لایه (layer) و ابزارهای طراحی می باشد که در نرم افزارهای گرافیکی مانند photoshop مشابه آنرا دیده ایم.

 

ابزار CSS-Shack

 

۳- Marmoset:

اپلیکیشن خاصی است که کار خاصی انجام می دهد. شما می توانید کد موردنظر خود را (مانند css و js و php و …) در آن وارد کنید و سپس نرم افزار، تصویر سه بعدی و Mock up آنرا به شما تحویل می دهد. از قالب (theme) های مختلفی نیز پشتیبانی می کند. برای ایجاد تصاویر بلاگ ها و مقالات بسیار می تواند مفید و زیبا باشد.

 

اپلیکیشن Marmoset کروم

 

۴- WhatFont:

توسط این افزونه (Extension) براحتی می توان متوجه شد که چه فونتی در بخش های مختلف وب سایت استفاده شده است. با بردن نشانگر ماوس بر روی المان موردنظر نام فونت استفاده شده بصورت Tooltip نمایش داده می شود.

 

افزونه WhatFont گوگل کروم

 

همچنین می توانیم نام سرویس مورد استفاده برای نمایش فونت یک بخش را نیز مشاهده کنیم. مانند Google Font API و TypeKIT.

 

۵- Window Resizer:

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

 

افزونه Window Resizer کروم

 

۶- ColorZilla:

با استفاده از این افزونه، ترکیبی از ابزارهای مربوط به رنگ وبسایت در اختیار شما خواهد بود. امکاناتی مانند: شناسایی کد رنگ بخش خاصی از صفحه وب، ایجاد گرادینت رنگی (gradient) و… همه و همه توسط این افزونه در مرورگر شما قابل استفاده خواهد بود.

 

افزونه ColorZilla

 

۷- Page Ruler:

ابزاریست برای اندازه گیری دقیق هر بخش از وب سایت توسط خط کش (Ruler). به دو صورت می توانید بخش موردنظر را اندازه بگیرید: ناحیه دلخواه خود را انتخاب کنید و یا ابعاد را بصورت دستی در آن وارد کنید. همچنین می توانید ناحیه مشخص شده را تغییر رنگ بدهید.

 

افزونه Page Ruler

 

۸- Pallette :

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

 

افزونه Pallette

 

۹- PerfectPixel :

این افزونه یک تصویر را بصورت نیمه شفاف (Semi-Transparent) بر روی وب سایت نمایش می دهد تا بتوانید تفاوت تصویر را با وب سایت بصورت پیکسل به پیکسل متوجه شوید.

 

افزونه PerfectPixel

 

 

 ابزارهای توسعه (Development Tools

 

۱۰- Chrome MySQL Admin :

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

 

ابزار Chrome MySQL Admin

 

۱۱- JSON Formatter :

اگر کد json دلخواه خود را در این افزونه paste کنید، می توانید آن کد را بصورت زیباتر و با فرمت خواناتری مشاهده کنید. امکان collapse کردن بخش های json وجود دارد و نیز می توانید آدرس های وب سایت (url) را دنبال (follow) کنید.

 

ابزار JSON Formatter

 

۱۲-Web Developer :

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

 

ابزار Web Developer

 

 

۱۳-Grunt Devtools  :

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

 

افزونه Grunt Devtools

 

۱۴-PHP Console :

افزونه php console امکان اجرای کدهای php و نیز خطایابی (debug) آنرا به برنامه نویسان ارائه می دهد.

 

افزونه php console

 

۱۵-Python :

مفسر تعاملی پایتون برای مرورگر گوگل کروم می باشد. ابزاری کامل برای تست کدهای python. این افزونه، نسخه کامل و کامپایل شده python 2.7 می باشد که از native client استفاده می کند.

 

ابزار Python

 

۱۶-Form Filler :

این افزونه می تواند تمام input های یک فرم را با اطلاعات تستی پر کند. بعنوان مثال در فرم هایی که دارای input های زیادی می باشند، برای تست اعتبارسنجی (validation) و کدهای backend می تواند مفید باشد. این داده های تستی قابل تنظیم می باشند.

 

افزونه Form Filler

 

 ویرایشگرهای کد (Code Editors

 

۱۷- Caret:

یک ویرایشگر متن و کد open source می باشد که شبیه نرم افزار Sublime Text می باشد. امکانات و ویژگی های یک نرم افزار ویرایشگر کد را یکجا دارد. از زبان های برنامه نویسی بسیاری پشتیبانی می کند.

 

افزونه Caret

 

دارای قابلیت Code Completion می باشد. برای لپ تاپ های ChromeBook بهترین افزونه و اپلیکیشن برای ویرایش متن و کد می باشد. تصویر کروم‌بوک را در زیر مشاهده می کنید:

 

لپ تاپ های ChromeBook

 

۱۸- Text:

ابزار Text یک اپلیکیشن فشرده (Compact) می باشد با طراحی زیبا و خلوت که هیچ ویژگی برهم زننده تمرکز و حواس ندارد. دارای امکان Syntax Highlighting می باشد و در نهایت می توان کد موردنظر را بر روی گوگل درایو (Google-Drive) ذخیره نمود.

 

ابزار Text

 

۱۹- Nitrous Lite:

یک سرویس رایگان و cloud-base می باشد که یک محیط با امکانات زیاد برای برنامه نویسی و کامپایل در مرورگر کروم فراهم می کند. قابلیت هایی نظیر: ویرایشگر کد built-in و ترمینال Linux و برقراری ارتباط با سایر برنامه نویسان در پروژه های Team Work و…

 

افزونه Nitrous Lite

 

۲۰- Chrome Dev Editor:

 ابزاری است برای نوشتن و کامپایل کدهای موردنظر در مرورگر کروم که توسط گوگل تولید و توسعه یافته است. هدف اصلی این اپلیکیشن، تولید اپلیکیشن های کروم (Chrome Apps) می باشد اما می توان از آن برای تولید و توسعه نرم افزارهای تحت وب نیز استفاده کرد. دارای قابلیت Syntax Highlight و کنترل ورژن (Version Control) توسط Git و Bower و Pub می باشد.

 

افزونه Chrome Dev Editor

 

 ابزارهای شبکه (Network Tools

 

۲۱- Postman:

یک ابزار پیشرفته برای نظارت (monitoring) و بهبود (improve) جریان کاری API می باشد. توسط این ابزار می توانید درخواست های خود را ایجاد و داکیومنت کنید، Context دلخواه خود را تغییر دهید و همه جوانب را تست کنید.

 

افزونه Postman

 

۲۲- DHC – REST/HTTP API Client:

اپلیکیشنی است که به کاربران اجازه می دهد درخواست (request) و پاسخ (response) HTTP/REST را ارسال، دریافت و دستکاری کنند. امکانات پیش فرض زیادی نظیر: تاریخچه (history) و local repository برای ذخیره درخواست ها (requests) و… کار کردن با این اپلیکیشن، ساده تر از Postman است.

 

DHC – REST/HTTP API Client

 

 

۲۳- Cookies:

ابزاریست با کاربری آسان، برای مدیریت کوکی های ذخیره شده مرورگر کروم و افزودن کوکی جدید.

 

افزونه Cookies

 

۲۴- Ajax Debugger:

این اپلیکیشن، از تمام فعالیت های آژاکسی (AJAX Activity) لاگ (log) می گیرد و قابلیت inspection از http status و زمان پاسخ (response time) را به کاربران می دهد.

 

Ajax Debugger

 

 ابزارهای مفید گوناگون (Utilities

 

۲۵- Cog – System Info Viewer:

اپلیکیشنی است که اطلاعات و مشخصات سخت افزاری و نرم افزاری کامپیوتر شما را در قالب یک طراحی زیبا و کاربرپسند ارائه می دهد. شما می توانید میزان استفاده از CPU و RAM و نیز نوع سیستم عامل تان را بوسیله این افزونه دریافت کنید.

 

Cog – System Info Viewer

 

 

۲۶- Session Buddy:

افزونه قدرتمندی است برای مدیریت تب های باز مرورگر گوگل کروم. کاربرانی که بطور معمول تعداد ۲۰ تب و یا بیشتر در کروم باز دارند، براحتی می توانند توسط این افزونه، تب های باز را دسته بندی کنند و در هنگام crash کردن مرورگر، می توانند آنها را بازیابی (restore) کنند. کاربران براحتی می توانند مشخصات تب های باز را در قالب یک فایل json برون ریزی (export) کنند و در هنگام نیاز، آنها را import کنند.

 

Session Buddy

 

 

۲۷- Lucidchart Diagrams:

ابزاریست زیبا و جالب برای تولید فلوچارت (Flowchart) و سایر نمودارها. به اتصال اینترنت نیاز ندارد و می تواند چارت های تولیدی شما را به فرمت های PNG و JPG و PDF به شما تحویل دهد. برای تقویت ارائه (presentation) و بهبود بخشیدن داکیومنت های شما و یا حتی تکالیف منزل (Homework Assignment).

 

Lucidchart Diagrams

 

۲۸- Hasher:

افزونه hasher، مقدار رمزنگاری شده را طبق الگوریتم هایی نظیر MD5 و SHA-1 و… را ارائه می دهد. این افزونه بطور کامل توسط جاوااسکریپت تولید شده است و در سمت کاربر (Client Side) محاسبات لازم را انجام می دهد.

 

Hasher

 

 

۲۹- The Great Suspender:

این افزونه مجددا به تب های مرورگر مرتبط می باشد. بطور اتوماتیک، تب های بی استفاده را به حالت تعلیق (suspend) در می آورد تا در حافظه سیستم صرفه جویی کرده باشد. هر وقت که به آن تب نیاز داشتید، براحتی روی آن focus کنید و refresh را بزنید.

 

The Great Suspender

 

۳۰- Alchemize:

اپلیکیشنی است که امکان فشرده سازی (minify) و زیباسازی (beautify) کدها را به کاربران می دهد. بصورت آفلاین کار می کند و یک رابط کاربری ساده بصورت drag & drop دارد که از کدهای XML , CSS , HTML , JSON , JS پشتیبانی می کند.

 

Alchemize

 

 

۳۱- Secure Sell:

افزونه ایست در گوگل کروم که ترمینال xterm-compatible را شبیه سازی می کند. می تواند بعنوان کلاینت  stand-alone SSH مورد استفاده قرار بگیرد. از افزونه Secure Shell می توان در مرورگر گوگل کروم و ChromeBook استفاده نمود.

Secure Sell

 

۳۲- Appspector:

وقتی افزونه Appspector را در کروم نصب کنید، یک آیکون بصورت تصویر زیر به نوار آدرس مرورگر افزوده می شود که تکونولوژی ها و زبان های برنامه نویسی مورد استفاده در وب سایت در حال مشاهده را به شما نشان می دهد.

 

Appspector

 

 

۳۳- Check My Links:

توسط این افزونه، می توانید لینک های خراب (broken links) را در یک صفحه وب مشاهده کنید:

 

Check My Links

 

 سرگرمی (Entertainment

 

۳۴- Floating Youtube:

افزونه ایست برای نمایش ویدئوهای یوتیوب بصورت شناور در بالای تمام پنجره ها. این افزونه برای عاشقان موزیک بسیار مفید است!

 

Floating Youtube

 

 

۳۵- Bacon Ipsum:

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

 

Bacon Ipsum

 

امیدوارم از این مقاله بهره کافی را برده باشید و با افزونه ها و ابزارهای رایگانی که مرورگر گوگل کروم در اختیار شما طراحان وب قرار می دهد آشنا شده باشید. لطفا نظرات خود را از طریق فرم ارسال دیدگاه و یا به ایمیل EhsanSafari@hotmail.com ارسال نمائید.

 

منبع: https://tutorialzine.com/2015/06/35-handy-chrome-extensions-and-apps-for-developers


برچسب‌ها:

ابزار windows resizerابزار طراحیابزارهای کروماپلیکیشن کرومافزونه marmosetافزونه WhatFontافزونه کرومافزونه های گوگل کروماکتنشن کروم

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

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

دو × 1 =