اکستنشن های گوگل کروم برای طراحان و برنامه نویسان وب سایت

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

شما می توانید افزونه های کوروم را با فشار دادن نماد منو در گوشه سمت راست بالای مرورگر مدیریت کنید. گزینه ابزارهای بیشتر را انتخاب کرده و گزینه “extention” را انتخاب کنید.

پس از نصب افزونه در کروم ، معمولا یک آیکون کوچک برای آنها در کنار فیلد url ظاهر می شود. در این مقاله با برخی از افزونه های گوگل کوروم آشنا می شوید.

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

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

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

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

چند برنامه گوگل کروم که برای شما انتخاب کرده ایم ، به دسته بندی های زیر طبقه بندی می شوند:
افزونه های مفید گوگل کروم
نمایش زمین از google earth

این افزونه یک تصویر ماهواره ای جذاب را از  google earth  هر بار که برگه جدیدی باز می کنید، می گیرد. شما می توانید عکس ها را به عنوان تصویر زمینه ذخیره کنید و یا آنها را در گوگل مپ مشاهده کنید و یا آن را در رسانه های اجتماعی به اشتراک بگذارید.

اپلیکیشن های گوگل نیز همچنان از این صفحه قابل دسترسی هستند که می توانید که می توانید با کشیدن موس خود بر روی منو در گوشه سمت چپ بالا آن را پیدا کنید.
MagiCSS

یک افزونه ویرایشگر CSS است که دارای یک ویرایشگر داخلی است، که می تواند کدهای CSS  را زیباتر کند.
CSS Dig

CSS DIG گروه ها، سبک ها و بلوک سبک ها را در اکثروب سایت ها پیدا می کند. این کار راه حل آسان برای تجزیه و تحلیل کد و برنامه ریزی مجدد در وب سایت ها است.
CSSViewer

ابزار و افزونه های دیگری وجود دارد که بتوانند کار این افزونه را انجام دهند حتی شاید بهتر از این افزونه آن کار را انجام دهند ولی هیچ کدام از آنها پسوند گوگل کروم را ندارند. بنابراین استفاده از این افزونه بسیار ساده است فقط کافی است بر روی آن در نوار ابزار کلیک کنید و روی هر عنصری که می خواهید بازبینی شود کلیک کنید.
CSS-Shack

یک پلاگین است که به شما اجازه می دهد تا سبک های لایه را انتخاب کنید (درست مانند اپلیکیشن های ویرایش تصویر) و آن را به یک فایل CSS ساده صادر کنید.
CSS3 generator

همانطور که از نام آن پیدا است، تمام کد های مورد نیاز css  را تولید می کند.
CSS Shapes Editor

یک اکستنشن برای ویرایش مقادیر css shape  است.
اکستنشن های ویرایشگر
WordPress Style Editor

با این ابزار شما می توانید استایل های وردپرس خود را بازرسی کنید و ویرایش  css خود را به صورت مستقیم انجام دهید.
PageEdit

این ابزار گوگل کروم را به WYSIWYG  ویرایشگر html  تغییر خواهد داد که به شما این امکان را می دهد تا صفحات خود را ویرایش کنید.
افزونه های عملکرد و معتبر سازی
Perfmap

این ابزار یک برنامه افزودنی است که یک نقشه عملکردی از دامنه شما را تعیین می کند و زمان بندی منابع موجود در مرورگر را با استفاده از این API  بارگزاری می کند.
اعتبار (validity)

این یک افزونه است که به شما اجازه می دهد تا هر صفحه وب که خواستید را تائید کنید.
Visual Inspector

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

این افزونه یک اکستنشن است که هر صفحه را برای خطاها و اشتباهات چک می کند.
Bootlint This Page

این افزونه یک دکمه bootline  به هر صفحه اضافه خواهد کرد که هر صفحه را برای خطاهای رایج بررسی می کند. خطاها در پنجره کنسول نشان داده شده می شود.
پلاگین های اندازه گیری
ابعاد

این افزونه ابزار ساده و در عین حال فوق العاده مفید است که عرض و ارتفاع صفحه شما را اندازه گیری می کند.
افزونه های رنگ بندی
Color zilla

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

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

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

هرکدام از این افزونه ها بدون هیچ گونه سفارش خاصی در Google Webstore یافت می شود. با کلیک بر روی آن می توانید آن را بر روی مرورگر گوگل کروم خود نصب کنید. هنگامی که یک افزونه که آن را دوست دارید پیدا می کنید، فقط با یک کلیک بر روی آن می توانید به آسانی آن را نصب کنید. پس از نصب، افزونه به عنوان یک آیکون کوچک در مرورگر کروم ظاهر خواهد شد.
Loom

اجازه می دهد تا کاربران به صورت مستقیم فیلم ها را از روی مرورگر نصب کنند. لونوم ذخیره سازی نامحدود از فایل های ویدئویی را ارائه می دهد. با نوشتن یک کد Html اجازه می دهد که آن ویدئو در همه جا به اشتراک گذاشته شود. فیلم ها نیز می توانند دانلود شوند. ویدئوهای Loom همچنین می توانند در یک ساختار پوشه جالب، ذخیره شوند و مطمئن باشید که پروژه ها و ویدئو های شما به خوبی سازماندهی می شوند.
Lorem Ipsum Generator

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

یک ابزار دستی برای طراحان وب، به ویژه کسانی که فقط با استفاده از اسکریپت شروع به کار می کنند، این ابزار به کاربران اجازه می دهند تا عناصر css موجود در وب سایت خود را مشاهده و دستکاری کنند. همچنین به کاربرانی که می خواهند از Css  استفاده کنند بسیار کمک می کند.
Viewport Dimensions

ابزاری دیگر که برای اسکریپت های  css مناسب هستند. Viewport Dimensions یک افزونه ظریف و مفید است که ابعاد مرورگر را در پائین پنجره مرورگر نشان می دهد.

هنگام تعویض پنجره مرورگر ، Viewport به طور اتوماتیک ابعاد اندازه صفحه نمایش را نشان می دهد.
Clear Cache

یکی از مهمترین افزونه ها، clear cash است که به کاربران اجازه می دهد در کمتر از چند ثانیه حافظه پنهان مرورگر خود را پاک کنند. زمانی که میلیون ها گام را می روید و حافظه پنهان پر از اطلاعات می شود برای توسعه دهی و حذف داده های قدیمی از حافظه پنهان، از این افزونه استفاده می کنیم.
LastPass

last pass  در حال حاضر، یک شرکت مورد علاقه در میان بسیاری از کاربران است که اجازه می دهد تا از حساب های مختلف پیگیری شود. همچنین این افزونه برای کسانی که مدیریت حساب های مختلف را از طرف مشتریان متعدد دارند و یا کاربرانی که رمز های عبور خود را فراموش می کنند ، مفید می باشد.
Awesome Screenshot

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

این ابزار یک ابزار کمی سرگرم کننده برای ایجاد تصاویر 3d از شما است. هنگامی که یک تصویر را شبیه سازی می کنید.  هنگامی که یک تصویر را شبیه سازی می کنید، چرخش در مقیاس 3d باعث می شود که آن جالب تر از زمان عادی باشد. این ابزار همچنین در زمان استفاده از تصاویر مبتنی بر کد نیز مفید هستند.
Wappalyzer

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

در فوریه سال 2018 ، بیش از 13 درصد از کاربران دسکتاپ هنوز هم از اینترنت اکسپلورر استفاده می کنند. و این بسیار خجالت آور است زیرا اینترنت اکسپلورر با بسیاری از استانداردهای مدرن امروزی متناقض است. به همین دلیل است که شما نیاز به این ابزار دارید. IE TAB در واقع یک شبیه ساز IE  است که  IE  را در یک تب جدید شبیه سازی می کند و به شما اجازه می دهد تا وب سایت خود را در نسخه های مختلف مانند IE6، IE7، IE8، IE9 شبیه سازی کنید. این بسیار مهم است که شما بتوانید وب سایت خود را با تمام نسخه ها و مرورگر ها سازگار کنید، صرف نظر از این که وب سایتتان چقدر عمر دارد.
Click&Clean

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

این ابزار سریعترین راه برای شناسایی فونت ها در وب سایت است. بر روی عناصر راست کلیک کرده سپس گزینه inspect element  را انتخاب می کنید، سپس آنچه می خواهید را پیدا می کنید. به وسیله این ابزار نه تنها می توانید ببینید که چه فونتی استفاده می کنید بلکه می توانید کاربرد آن را هم ببینید.
ColorPick Eyedropper

این ابزار به شما این اجازه را می دهد تا فونت ها را دقیقا زوم کنید و کد رنگ های آن را دقیقا مشاهده کنید و بتوانید هر پیکسل را از صفحه وب دریافت کنید.استفاده از این  ابزار بسیار راحت و سریع است.
Lorem Ipsum Generator

درهنگام توسعه یک وب سایت، در نهایت شما به برخی از متن های ساختگی نیاز دارید. این ابزار در وب سایت فراوان است. این ابزار بلافاصله در داخل تب فعلی شما قابل دسترس می شود. این کار به سرعت انجام می شود و شما می توانید هر چند پاراگراف که می خواهید را سفارشی سازی کنید.
Check My Links

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

گوگل در سال 2008 معرفی شد در سال 2013 37 درصد از مرور کل کاربران توسط این مرورگر انجام می شود. اکستنشن های بسیاری برای کروم وجود دارد. برخی از این اکستنشن ها برای برنامه نویسان و طراحان وبایجاد گردیده و کمک بسیار زیادی به آنان می نماید. در زیر برخی از آنها را که با انها آشنا شده ام برای شما لیست می نمایم.

اکستنشن های مورد نیاز طراحان و برنامه نویسان وب
Eye Dropper

این نرم افزار به شما امکان می دهد از وب سایت رنگ انتخاب نمایید.
Palette for Chrome

این اکستنشن پلات های رنگی یک تصویر را نمایش می دهد و در اختیار کاربر می گذارد.
Image Downloader

تمام تصاویر موجود در صفحه وب سایت را نمایش می دهدو به شما قابلیت می دهد تصاویر را دانلود نمایید
TinEye Reverse Image Search

این پلاگین پیدا می نمایید تصویر از کجا بدست آمده و آیا نسخه با رزولوشن بهتری دارد و یا خیر. این اکستنشن برای آنکه بدانید تصاویر در اصل در کجا ایجاد شده اند مناسب است.
ruul. Screen Ruler

تمای موارد موجود در صفحه را توسط این اکستنشن می توانید سایز بزنید.
Tape

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

بهترین روش برای پیدا کردن فونت های وب سایت. فونت ها را تنها با حرکت موس خود بر روی نوشته مورد نظر می توانید بیابید. این نرم افزار همچنین از وب فونت ها پشتیبانی می نماید.
Screen Capture

یک ناحیه از سایت و یا یک تب را به صورت یک تصویر png برای شما ذخیره می نماید. همچنین قبل از ذخیره سازی تصویر می توانید تصویر مورد نظر را ویرایش نمایید.
Stylebot

Stylebot به شما امکان می دهد ظاهر هر وب سایتی را تغییر دهید. می توانید المان را انتخاب نمایید و تغییرات لازم را در المان انجام دهید. می توانید سایز فونت را تغییر دهید, رنگ ها, مارجین, نمایش و غیره. همچنین کاربران حرفه ای تر می توانند به صورت دستی کد css بنویسند.
Pixlr Editor

Pixlr به شما امکان ویرایش تصاویر را بدون دانلود کردن به شما می دهد. نرم افزار دارای امکانات بسیاری می باشد که مختص نرم افزارهای نصب شده بر روی کامپیوتر می باشد. با استفاده از این اکستنشن می توانید هر تصویری را در صفحه وب سایت ویرایش نمایید.
IE Tab

نمایش صفحه وب سایت توسط مرورگر اینترنت اکسپلورر در محیط کروم.
Resolution Test

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

Web Developer اکستنشنی با قابلیت های بسیار است که با شما امکانات فراوانی را به عنوان توسعه دهنده وب می دهد. این نرم افزار برای برنامه نویسان وب بسیار عالی است. این نرم افزار در فایرفاکس نیز موجود است.
QrURL

هر آدرس سایت را می توانید به کد QR تبدیل نمایید و در هر محیط فیزیکی که خواستید می توانید استفاده نمایید.
Pendule

ابزار پیشرفته توسعه دهندگان وب برای مرورگر کروم.
HTML Validator

این ابزار کد html صفحه ای از سایت که در آن هستید را اعتبارسنجی می نماید. همچنین می توانید تصمیم بگیرید نتایج را در یک پنجره مشاهده نمایید و یا به صفحه نتایج W3C بروید.
Check My Links

این اکستنش کلیه لینک های موجود در صفحه را بررسی می نماید و لینک هایی که به صفحه ای متصل نیستند را به شما اعلام می نماید. برای بررسی مشکلات وب سایت عالی است و بهتر است پس از هر به روز رسانی سایت توسط این نرم افزار چک شود.
BuiltWith Technology Profiler

این اکستنشن به شما امکان می دهد بررسی نمایید که سایت توسط چه تکنولوژی های ایجاد شده. با دانشتن تکنولوژی بکار رفته در سایر سایت ها خواهید توانست از آن تکنولوژی ها در طراحی سایت خود استفاده نمایید.
Quickrr Productivity Kit

یک ابزار بسیار کارامد که بسیاری را نیازهای شما را جوابگو خواهد بود. این پلاگین برنامه های به مانند: مترجم, دیکشنری, ماشین حساب, زمان بندی, نوت پد, تقویم, ساعت, تبدیل واحد ها, تایمر و غیره دارد.
AppJump App Launcher and Organizer

ابزاری برای دسترسی آسان به برنامه ها از طریق تولبار صفحه.
Save my Tabs

توسط این اکستنش می توانید کلیه تب های مرورگر را به علاقه مندی خود اضافه نمایید
Alexa Traffic Rank

این ابزار رنک الکسای هر سایت را در بالای صفحه اعلام می نماید. این اکستنشن همچنین رنک الکسای وب سایت ها را در نتیجه جستجوی گوگل نمایش می دهد.
SEO for Chrome

این ابزار به شما امکان می دهد رنک سئو سایت خود را در سایت های مختلف بررسی نمایید. به شما امکانات بسیاری برای بهینه سازی سایت در موتورهای جستجو نظیر بررسی کلمات کلیدی، بررسی رنکینگ سایت و …. می دهد.
WordPress Stats

آمار سایت بلاگ خود را می توانید در این اکستنش مشاهده نمایید. به شما اطلاعات آماری بسیاری در مورد وب سایت می دهد بدون اینکه نیاز داشته باشید وارد کنترل پنل خود شوید.
Domain Availability Checker

این اکستنشن به شما امکان بررسی جستجوی نام دامنه را در تولبار می دهد اینکه آیا دامنه آزاد می باشد و یا خیر و همچنین اطلاعات مالکیتی دامنه
Theme Sniffer

قالب جوملا و وردپرس سایت را که در حالت رویت آن هستید به شما اعلام می نماید.
Forget Me

همه چیز را در مورد یک سایت پاک می نماید – انگار که سایت مورد نظر توسط کامپیوتر شما تا کنون مشاهده نشده.