معرفی چند Extension کاربردی برای برنامه‌نویسان Front-End

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

ابزار اول: Perfect Pixel

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

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

نصب در گوگل کروم

نصب در فایرفاکس

ابزار دوم: Click to Remove Element

قطعا براتون پیش اومده که هنگام پیاده سازی صفحه‌ای و سپس بررسی خروجی در مرورگر، بخواین برای در نظر گرفتن حالت‌های خاصی المنتی رو از صفحه پاک کنید. خب به صورت معمول یا باید از داخل کد حذفش کرد و یا اینکه از Inspect Element المنت مورد نظر رو پاک کرد.

بعد از نصب این Extension شما تنها کافیه با فعال کردنش در صفحه مورد نظر و کلیک روی بخش‌هایی که میخواین حذف بشن اقدام کنید.

استفاده دیگه‌اش توی سایت هاییه که تبلیغات خیلی اذیتتون میکنه.

نصب در گوگل کروم

نصب در فایرفاکس

ابزار سوم: Page Ruler Redux

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

نصب در گوگل کروم

نصب در فایرفاکس

ابزار چهارم: ColorZilla

شاید این ابزار رو بشناسید و بیشتر برای تازه‌کارها جالب باشه. این ابزار در واقع یک Color Picker در محیط وب هستش و با کلیک کردن روی نقطه مورد نظر، کد Hex رنگ رو براتون در Clipboard ذخیره میکنه.

نصب در گوگل کروم

نصب در فایرفاکس

ابزار پنجم: Page Load Time

از این ابزار میتونید در زمینه بهینه‌سازی صفحه استفاده کنید. همونطور که از اسمش مشخصه در مواقع زمان صرف شده جهت بارگزاری صفحه رو برای شما اندازه‌گیری میکنه و شما میتونید تاثیر تغییرات انجام شده جهت بهینه‌سازی رو ارزیابی کنید.

نصب در گوگل کروم

نصب در فایرفاکس

ابزار ششم: Web Developer

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

نصب در گوگل کروم

نصب در فایرفاکس

در پایان متشکرم از اینکه وقت گذاشتید و این مطلب رو خوندین. همونطور که در ابتدای صفحه اشاره کردم، خوشحال میشم در صورت تمایل تجربه‌های خودتون در استفاده از ابزارهایی که میتونه برای برنامه‌نویسان Front-End کاربردی باشه رو معرفی کنید.