۹ افزونه موزیلا فایرفاکس برای طراحان وب

9 افزونه موزیلا فایرفاکس برای طراحان وب

۹ افزونه موزیلا فایرفاکس برای طراحان وب

Top 10 Firefox Add-Ons for Designers

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

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

برای چندین سال متوالی، من از کاربران و استفاده کنندگان مرورگر گوگل کروم بوده ام. ولی اخیرا تصمیم گرفتم به استفاده از مرورگر موزیلا فایرفاکس شیفت بدهم. چندسال قبل، تنها ابزاری که مرورگر فایرفاکس در اختیار برنامه نویسان و طراحان وب قرار می داد افزونه فایرباگ (Firebug) بود. با اینکه در آن سالها، فایرفاکس افزونه های دیگری به غیر از فایرباگ را بصورت پیش فرض (built-in) در خود جای داده بود اما هیچکدام از آنها به قدرت افزونه های مرورگر گوگل کروم و یا فایرباگ موزیلا نمی رسیدند. اما اخیرا که مجددا به استفاده از فایرفاکس روی آوردم، تغییرات زیادی را در این زمینه مشاهده کردم.

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

نکته: برخی از ابزارهای جدید و بروز فایرفاکس در نسخه Firefox Nightly در دسترس می باشد اما اغلب افزونه ها و ابزارها در نسخه عادی مرورگر Firefox موجود می باشد.

۱- ابزار CSS grid:

افزونه CSS Grid باعث بهبود طراحی وب سایت می شود و تا جائیکه بنده اطلاع دارم، تنها مرورگری که این ابزار را در اختیار کاربران قرار می دهد، فایرفاکس (Firefox’s Dev Tools) می باشد. کارهایی که این افزونه می تواند انجام دهد بصورت زیر می باشد:

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

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

برای کسب اطلاعات بیشتر در این زمینه، به وب سایت Mozilla.org مراجعه کنید.

ابزار CSS grid

۲- ابزار CSS Animation:

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

به همین ترتیب این ابزار می تواند انیمیشن فرزند المان ها (child elements) را نیز شناسایی و تفکیک کند. افزونه css animation برای هر المانی که دارای انیمیشن باشد یک نوار زمان (timeline) به شما نشان می دهد که می توان انیمیشن را متوقف کرد و یا سرعت آنرا کم و زیاد کرد.

ابزار CSS Animation

با استفاده از ابزار css animation می توان بطور بصری (visual) انیمیشن المان موردنظر را بررسی کرد و استایل های مربوطه را در تب Styles با توجه به انیمیشن دلخواه خود تغییر دهید. بطور مثال، از این طریق می توانید متوجه شوید که کدام تابع easing برای انیمیشن شما مناسب می باشد.

به منظور کسب دانش بیشتر درباره ابزار css animation فایرفاکس، به سایت developer.mozilla.org مراجعه شود.

۳- نوار ابزار Developer:

Developer Toolbar یک روش سریع و آسان است برای دسترسی به ابزار توسعه مرورگر موزیلا فایرفاکس (Firefox’s Dev Tools) یک محیط خط فرمان (Command line Interface) نسبتا ساده دارد که توسط آن می توان به تمام امکانات و افزونه های مرورگر موزیلا برای توسعه وب دسترسی داشت. بعنوان مثال از طریق نوارابزار Developer می توان یک اسکرین شات سریع از صفحه گرفت و یا رنگ خاصی را از آن صفحه انتخاب کرد و یا ریسپانسیو بودن وب سایت را در تمام اسکرین ها تست کرد.

نوار ابزار Developer

برای باز کردن نوارابزار Developer کافیست دکمه های ترکیبی Shift+F2 را باهم بفشارید. سپس در خط فرمان (command line) عبارت help را تایپ و اینتر کنید تا لیست تمام امکانات و ابزارهای دردسترس را مشاهده کنید.

به منظور تکمیل دانش خود درباره نوارابزار Developer فایرفاکس، به سایت developer.mozilla.org مراجعه کنید.

۴- حالت طراحی واکنش‌گرا (Responsive Design Mode):

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

حالت طراحی واکنش‌گرا (Responsive Design Mode)

برای فعال‌سازی این ابزار کافیست در Dev Tools مرورگر فایرفاکس، روی آیکون Responsive Design Mode کلیک کرده و برای فعال کردن این مد (mode) در نوار ابزار Developer عبارت resize on را تایپ و اینتر کنید. برای تست یک سایز خاص عبارت resize to <width> <height> را اجرا کنید. به منظور غیرفعال کردن این قابلیت، عبارت resize off را اجرا کنید و یا با اجرای دستور resize toggle می توان قابلیت resize را خاموش و روشن کرد.

۵- خط‌کش (Ruler):

توسط ابزار خط کش (ruler) قادر خواهید بود دیزاین وب سایت خود را با دقت بیشتری بررسی کنید مانند خط کشی که در نرم افزارهای طراحی مانند فتوشاپ وجود دارد.

خط‌کش (Ruler)

به منظور فعال سازی افزونه خط کش، بر روی آیکون خط کش (Rulers) واقع در بالای Dev Tools موزیلا کلیک کنید و یا عبارت rulers را در خط فرمان (command line) نوارابزار Developer تایپ و اجرا کنید.

۶- Eyedropper:

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

Eyedropper

می توانید نحوه نمایش کد رنگ را تغییر دهید (مثلا بصورت هگزادسیمال و یا RGB). با مراجعه به منوی Web Developer و یا اجرای دستور eyedropper در خط فرمان نوارابزار Developer می توان ابزار Eyedropper را فعال کرد.

۷- ابزار اسکرین‌شات (Screenshot Tool):

مرورگر فایرفاکس دارای یک افزونه مفید برای گرفتن اسکرین شات می باشد که بصورت پیش فرض (built-in) در این مرورگر نصب می باشد و دیگر نیازی به نصب افزونه های جانبی برای گرفتن اسکرین شات از صفحه مرورگر خود نخواهید بود.

ابزار اسکرین‌شات (Screenshot Tool)

در حالت عادی (normal mode) شما می توانید توسط این ابزار از بخشی از اسکرین توسط درگ کردن (drag) اسکرین شات بگیرید و یا اینه روی بخش موردنظر از صفحه کلیک کنید تا فقط از آن قسمت اسکرین گرفته شود.

اگر حالت ریسپانسیو فعال باشد (Responsive Mode)، می توانید با کلیک روی دکمه کوچک واقع در قسمت بالا سمت راست اسکرین، از قالب وب سایت خود در دستگاه های مختلف اسکرین شات تهیه کنید.

برای فعال سازی ابزار اسکرین شات در فایرفاکس نسخه ۵۷ (Nightly) باید از تولبار اصلی، که در بخش بالا سمت راست Dev tools قرار دارد اقدام کنید و یا اینکه دستور screenshot را در خط فرمان تولبار Developer تایپ و اجرا کنید.

۸- ابزار اندازه‌گیری (Measure Tool):

با فعالسازی ابزار اندازه‌گیری در مرورگر فایرفاکس، می توانید هر بخش دلخواه از وب سایت را اندازه گیری کنید. در واقع ابزار Measure این امکان را به طراحان وب می دهد که طول و عرض (height and width) هر المان را با واحد پیکسل (px) مطابق تصویر زیر برای شما نمایش دهد. همچنین این ابزار قابلیت اندازه گیری فاصله بین دو گوشه یک مستطیل (corner) را نیز دارد.

۹- تم تیره، روشن یا فایرباگ (Firebug Theme):

بخش ابزارهای Dev Tools فایرفاکس شامل سه تم پیش فرض می باشند: تم روشن (سفید-white)، تم تیره (آبی-blue) و تم اورجینال Dev tools فایرفاکس یعنی تم فایرباگ (Firebug Theme).

تم تیره، روشن یا فایرباگ (Firebug Theme)

مرورگر فایرفاکس روز به روز در حال پیشرفت و بهبود می باشد و نسخه ۵۷ این مرورگر به اوج خود رسیده است. ویژگی ها و امکاناتی که مرورگر Fire Fox در اختیار کاربران قرار می دهد، باعث شده است که این مرورگر نه تنها برای مشاهده وب سایت ها جذاب باشد بلکه برای توسعه دهندگان وب سایت نیز کاربردی و مفید می باشد.

اگر هنوز ابزارهای توسعه (Dev Tools) مرورگر فایرفاکس را چک نکرده اید، می توانید به وب سایت Developer.Mozilla.org مراجعه نمائید.

منبع: https://webdesign.tutsplus.com

0/5 ( 0 نظر )
.ez-toc-title-container { text-align: right; display: inline; color: green; font-weight: bolder; direction: ltr; }

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

گوگل ادز

راهنمای جامع سرویس گوگل ادز

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

دانلود رایگان کتاب الکترونیکی

آموزش تصویری سرویس گوگل آنالیتیکس

کتاب آموزش گوگل آنالیتیکس
آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"