در حالی که 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 افزونه‌ای است که به شما اجازه می دهد استایل های لایه بندی شده را درست کنید (درست مانند برنامه های ویرایش تصویر) و آن ها را در یک فایل سی‌اس‌اس خروجی بگیرید.

۲۵ افزونه ضروری کروم برای طراحان و توسعه دهندگان وب

CSS۳ Generator

همانطور که از نام CSS۳ 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 یک افزونه بسیار ساده است که به شما اجازه می دهد تا به سادگی و سرعت وبسایت‌تان را در دستگاه های مختلف موبایل امتحان کنید. این کار برای آزمایش میزان واکنشگرا بودن وبسایت‌تان بسیار کمک می کند.

۲۵ افزونه ضروری کروم برای طراحان و توسعه دهندگان وب

۴۵to۷۵

برای مطمئن شدن از میزان متن ها و تعداد کاراکترهای شما در دستگاه های مختلف می توانید از افزونه ۴۵to۷۵ استفاده کنید. ۴۵To۷۵ کاراکترهای شما را در بین ۴۵ تا ۷۵ قرار می دهند و سعی می کنند اندازه خطوط را بهینه نگه دارند.

۲۵ افزونه ضروری کروم برای طراحان و توسعه دهندگان وب

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 را مشاهده کنید. آنها به شما خبرهای تازه این صنعت را می‌دهند.

منبع

ترجمه : وبسایت آموزشی راکت

تبلیغات

پاسخ دهید

آدرس ایمیل شما منتشر نخواهد شد. فیلدهای اجباری مشخص شده اند *
شما می توانید از این استفاده کنید HTML برچسب ها و ویژگی ها: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>