در حالی که 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 را مشاهده کنید. آنها به شما خبرهای تازه این صنعت را می‌دهند.
اگر دوست داشتید می‌توانید مطلب «۱۰ افزونه فایرفاکس برای وبمسترها» را نیز دنبال کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید