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

6 ابزار کاربردی نسخه توسعه دهنگان مرورگر فایرفاکس

6 ابزار کاربردی نسخه توسعه دهنگان مرورگر فایرفاکس

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

در این مقاله تعدادی از این ابزارهای کاربردی را معرفی و بررسی می کنیم.

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

۱. Animation inspector tool

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

برای دسترسی به این ابزار بر روی انیمیشن کلیک راست کرده و گزینه “Inspect Element” را انتخاب نمایید، سپس در سمت راست  پنجره ی “Dev Tool” روی گزینه “Animations” کلیک کنید.

Firefox Animation

۲. Animation timing function editor

زمان بندی انیمیشن ها را می توان در قست “Developer Tools” به آسانی ویرایش نمود. فقط کافیست روی آیکون کنار “Function” مربوط به انیمیشن در بخش “Rules” کلیک کنید تا منحنی نمایش داده شود. همزمان با تغییر دادن منحنی زمان بندی انیمیشن نیز تغییر خواهد کرد.

Firefox Animation Timing Function

۳. Color Picker for CSS Properties

این ابزار علاوه بر نسخه Developer در نسخه های استاندارد مرورگر فایرفاکس نیز در دسترس است با این تفاوت که ابزار معرفی شده مخصوص رنگ های css است . به کمک این ابزار می توانید رنگ مورد نظر خود را از رنگ های استفاده شده در پنجره مرورگر فایرفاکس انتخاب نمایید برای این کار کافیست بر روی ابزار “Color Picker” را کلیک کنید و رنگ مورد نظر خود را از انتخاب کنید .همچنین در کنار رنگ های css در بخش rules آیکونی وجود دارد که با کلیک برروی آن می توانید رنگ مورد نظر خود را انتخاب کنید.

Firefox Color Picker

۴. Measuring tool

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

این ابزار به شما کمک می کند تا مختصات پیکسلی هر قسمت از یک وب سایت را مشخص کنید یا به عبارت دیگر با استفاده از این ابزار می توانید اندازه های مورد استفاده (طول و ارتفاع) برای هر المان را بدست آورید. برای فعال کردن این ابزار می بایست به قسمت تنظیمات “Toolbox” رفته و تیک “Measure a portion of the page” را از بخش “Default Firefox Developer Tools” فعال نمایید.. پس از فعال سازی آیکون خط کش در بالای پنجره نمایش داده می شود که با کلیک برروی این آیکون و حرکت دادن آن می توانید ارتفاع طول و … را محاسبه کنید .

Firefox Measuring Tool

۵. CSS filter editor

با استفاده از خاصیت filter در CSS میتوان عملیاتی مانند تار کردن ، سیاه و سفید کردن تصاویر ، کنتراست و … را روی تصاویر انجام داد.

اگر از خاصیت فیلتر در وب سایت خود استفاده می کنید در قسمت “Rules” از بخش “Inspector” می توانید تنظیمات مربوط به این ویژگی را سفارشی سازی نمایید.

برای اضافه کردن فیلتر در پایین صفحه برروی قسمت فیلتر کلیک کنید و فیلتر مورد نظر خود را انتخاب کنید.
برای حذف فیلتر نیز می توانید از علامت × قرار گرفته در کنار نام فیلتر استفاده کنید.

Firefox Css Filter

۶. Memory tool

میزان استفاده از حافظه و حجم فایل ها دریک وب سایت از عوامل بسیار مهم در سرعت بارگذاری صفحات به شمار می رود.

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

برای فعال کردن این ابزار می بایست به قسمت تنظیمات “Toolbox” رفته و تیک “Memory” را از بخش “Default Firefox Developer Tools” فعال نمایید.

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

Firefox Memory Tool

منبع hongkiat

۲ دیدگاه

کلیک برای ثبت دیدگاه