SHET22

بهترین افزونه‌های فایرفاکس برای طراحان سایت

بهترین افزونه‌های فایرفاکس برای طراحان سایت

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

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

آنچه در این مقاله می‌خوانید

چرا Firefox در سال ۲۰۲۶ هنوز مهمه

یکی از تفاوت‌های مهم Firefox با مرورگرهای مبتنی بر Chromium به Manifest V3 مربوط می‌شه. Manifest مجموعه‌ای از قوانین فنیه که مشخص می‌کنه افزونه مرورگر به چه قابلیت‌هایی دسترسی داشته باشه. Google با Manifest V3 روش کنترل درخواست‌های شبکه رو در Chrome تغییر داد و همین موضوع روی عملکرد بعضی مسدودکننده‌های محتوا اثر گذاشت.

طبق خط زمانی رسمی Google برای کنار گذاشتن Manifest V2، افزونه‌های مبتنی بر این نسخه از ۲۴ جولای ۲۰۲۵ در همه کانال‌های Chrome غیرفعال شدن. امکان استفاده سازمانی هم با Chrome 139 کنار رفت و افزونه‌های باقی‌مونده Manifest V2 قراره در ۳۱ آگوست ۲۰۲۶ از Chrome Web Store حذف بشن. این اتفاق‌ها جدا از هم هستن و نباید همه‌شون رو یک تغییر مبهم در سال ۲۰۲۶ در نظر بگیریم.

Firefox دقیقاً همون مسیر Chrome رو دنبال نکرده. Mozilla اعلام کرده که قابلیت مسدودسازی درخواست‌ها با WebRequest رو نگه می‌د و فعلاً برنامه‌ای برای حذف پشتیبانی Manifest V2 اعلام نکرده. WebRequest قابلیتیه که به افزونه اجازه می‌ده درخواست‌هایی مثل بارگذاری اسکریپت یا تصویر رو بررسی و در صورت نیاز مسدود کنه. به همین دلیل، نسخه کامل بعضی افزونه‌ها مثل uBlock Origin هنوز در Firefox کار می‌کنه. جزئیات این تصمیم رو می‌تونید در توضیحات رسمی Mozilla درباره Manifest V3 ببینید.

چند دلیل دیگه برای تست سایت با Firefox

  • ابزارهای بررسی چیدمان: ابزارهای توسعه‌دهنده Firefox نمایش Grid و Flexbox رو دارن و پیدا کردن فاصله‌ها و اشکال‌های چیدمان رو راحت‌تر می‌کنن.
  • Firefox Developer Edition: این نسخه برای توسعه وب آماده شده و بعضی قابلیت‌های تازه ابزارهای توسعه‌دهنده رو زودتر در اختیارتون می‌ذاره.
  • متن‌باز بودن: کد Firefox در دسترسه و موتور مرورگرش به Chromium وابسته نیست.
  • تست بین‌مرورگری: یعنی سایتتون رو با بیشتر از یک مرورگر امتحان کنید. سایتی که در Chrome درست دیده می‌شه، ممکنه در Firefox مشکل ظاهری یا رفتاری داشته باشه.

قبل از نصب افزونه، ابزارهای داخلی Firefox رو بررسی کنید

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

پیدا کردن کد رنگ بدون افزونه

افزونه‌هایی مثل ColorZilla برای ساخت پالت و نگه‌داشتن تاریخچه رنگ مفیدن، ولی برای برداشتن یک کد رنگ به افزونه نیاز ندارید. منوی اصلی Firefox رو باز کنید، وارد بخش ابزارهای بیشتر مرورگر بشید و گزینه Eyedropper یا قطره‌چکان رو انتخاب کنید.

گزینه Eyedropper
گزینه Eyedropper

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

نمایش کد رنگ
نمایش کد رنگ

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

شناسایی فونت بدون افزونه

روی متن موردنظرتون راست‌کلیک کنید و Inspect رو بزنید. بعد در بازرس عناصر، تب Fonts رو باز کنید. این بخش فونتی رو نشون می‌ده که مرورگر واقعاً برای همون متن استفاده کرده؛ نه فقط فونتی که در CSS نوشته شده.

این تفاوت برای سایت فارسی خیلی مهمه. ممکنه فونت دلخواهتون در CSS تعریف شده باشه، ولی فایلش درست بارگذاری نشه. در این حالت مرورگر یک فونت جایگزین نشون می‌ده و تب Fonts کمک می‌کنه سریع متوجه مشکل بشید.

گرفتن اسکرین‌شات بدون افزونه

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

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

اندازه‌گیری بخش‌های صفحه بدون افزونه

ابزار خط‌کش Firefox به‌صورت پیش‌فرض روی نوار ابزار دیده نمی‌شه. ابزارهای توسعه‌دهنده رو باز کنید، وارد تنظیماتش بشید و در بخش Available Toolbox Buttons گزینه Measure a Portion of the Page رو فعال کنید. بعد آیکون خط‌کش به نوار ابزار اضافه می‌شه و می‌تونید عرض و ارتفاع هر ناحیه رو ببینید.

ابزارهای داخلی کاربردی دیگه

  • Responsive Design Mode: حالت طراحی واکنش‌گراست و کمک می‌کنه صفحه رو در اندازه‌های مختلف موبایل و تبلت ببینید. برای راهنمای کامل‌تر می‌تونید آموزش تست ریسپانسیو بودن سایت رو بخونید.
  • JSON Viewer: خروجی JSON رو مرتب و قابل جست‌وجو نشون می‌ده. JSON یک قالب متنی برای جابه‌جایی اطلاعات بین سایت و سرویس‌های دیگه‌ست.
  • Accessibility Inspector: بعضی مشکل‌های دسترسی‌پذیری رو پیدا می‌کنه؛ یعنی ایرادهایی که استفاده از سایت رو برای افراد دارای محدودیت بینایی، حرکتی یا شنیداری سخت می‌کنن.
  • Network Throttling: سرعت اتصال رو شبیه‌سازی می‌کنه تا ببینید سایت با اینترنت کند چه رفتاری داره.

روش نصب امن‌تر افزونه در Firefox

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

برای شروع، عبارت about:addons رو در نوار آدرس بنویسید و Enter رو بزنید. راه دیگه اینه که منوی سه‌خط Firefox رو باز کنید و Add-ons and Themes رو انتخاب کنید.

hzuz0vtu enter add ons manager
ورود به بخش مدیریت افزونه‌ها (Add-ons Manager)

در بخش مدیریت افزونه‌ها، Extensions رو انتخاب کنید. بعد نام دقیق افزونه رو در کادر جست‌وجو بنویسید؛ برای نمونه می‌تونید Web Developer رو جست‌وجو کنید.

mdaeur8h add ons manager
سرچ افزونه

قبل از زدن Add to Firefox، نام سازنده و مجوزها رو بخونید و مطمئن بشید صفحه همون افزونه‌ایه که می‌خواید. بعد نصب رو تأیید کنید.

tmbecbfq add to firefox butten
اضافه کردن افزونه

افزونه‌هایی که واقعاً ارزش بررسی دارن

uBlock Origin

uBlock Origin در Firefox فقط برای حذف تبلیغ نیست. طراح‌ها و توسعه‌دهنده‌ها می‌تونن باهاش بارگذاری بعضی منابع شخص ثالث رو موقتاً متوقف کنن و ببینن سایت بدون اون‌ها چه رفتاری داره. منبع شخص ثالث یعنی فایلی که از دامنه‌ای غیر از دامنه اصلی سایت بارگذاری می‌شه؛ مثل ابزار آمارگیری یا چت آنلاین.

افزونه uBlock Origin
افزونه uBlock Origin

کاربردهای مفید uBlock Origin برای بررسی سایت شامل این موارده:

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

یادتون باشه مسدود کردن منابع می‌تونه ظاهر یا عملکرد سایت رو تغییر بده. برای نتیجه دقیق‌تر، یک بار هم صفحه رو بدون افزونه یا در یک نمایه تمیز Firefox آزمایش کنید.

Web Developer

Web Developer یک نوار ابزار با گزینه‌های مختلف به Firefox اضافه می‌کنه. این افزونه هنوز در مخزن Firefox فعاله، ولی آخرین نسخه ثبت‌شده در زمان بررسی مقاله، نسخه ۳.۰.۱ در ۱۹ ژوئن ۲۰۲۴ بوده. پس قبل از نصب، صفحه نسخه‌ها و وضعیت نگهداریش رو دوباره بررسی کنید.

افزونه Web Developer
افزونه Web Developer

با Web Developer می‌تونید تصاویر، JavaScript یا CSS رو موقتاً غیرفعال کنید، اطلاعات فرم‌ها و تصاویر رو ببینید و بعضی بررسی‌های فنی رو سریع‌تر انجام بدید. JavaScript زبانیه که بخش‌های تعاملی صفحه، مثل منو و فرم، معمولاً باهاش کار می‌کنن. مزیت اصلی این افزونه دسترسی یک‌جای شما به چند ابزار مختلفه.

مدیریت کوکی‌ها؛ ابزار داخلی یا Cookie Manager

کوکی فایل کوچیکیه که سایت برای نگه‌داشتن اطلاعاتی مثل ورود کاربر یا تنظیماتش در مرورگر ذخیره می‌کنه. برای دیدن و حذف کوکی‌های یک سایت، اول ابزار Storage داخل Firefox رو امتحان کنید. اگه به جست‌وجو، ویرایش یا مدیریت پیشرفته‌تر کوکی‌ها نیاز دارید، یک افزونه فعال و به‌روزتر مثل Cookie Manager رو بررسی کنید.

افزونه Cookie Quick Manager
افزونه Cookie Quick Manager

Cookie Quick Manager قبلاً گزینه شناخته‌شده‌ای بود، ولی آخرین نسخه‌ش در ۹ جولای ۲۰۱۹ منتشر شده. به همین دلیل دیگه اون رو پیشنهاد اصلی این مقاله نمی‌دیم. اگه هنوز ازش استفاده می‌کنید، قبل از ادامه کار مجوزها، سازگاری و وضعیت نگهداریش رو در صفحه رسمی Cookie Quick Manager بررسی کنید.

Multi-Account Containers

Multi-Account Containers تب‌ها رو در محیط‌های جدا نگه می‌د. هر محیط کوکی و نشست مستقل خودش رو داره. نشست همون وضعیت موقتی ورود کاربر به سایته.

افزونه Multi-Account Containers
افزونه Multi-Account Containers

با این افزونه می‌تونید در یک پنجره Firefox، هم‌زمان با چند حساب مختلف وارد یک سایت بشید. این قابلیت برای آزمایش نقش‌های کاربری خیلی مفیده، ولی قبل از استفاده روی حساب‌های حساس بهتره مجوزها و تنظیمات هر Container رو بررسی کنید.

برای تست یک فروشگاه ساخته‌شده با WooCommerce می‌تونید یک Container رو برای مدیر و یکی رو برای مشتری بذارید. برای آزمایش کاربر مهمان هم یک تب خصوصی یا Container تمیز به کارتون میاد.

Lighthouse و PageSpeed Insights

Google Lighthouse ابزار رسمی بررسی کیفیت صفحه‌های وبه، ولی پروژه رسمی اون افزونه‌ای برای Firefox معرفی نمی‌کنه. روش‌های رسمی اجرای Lighthouse شامل Chrome DevTools، افزونه Chrome و ابزار خط فرمانه. بنابراین افزونه‌های Firefox که نام Lighthouse رو دارن، لزوماً محصول رسمی Google نیستن.

افزونه Lightshot
افزونه Lightshot

برای گرفتن گزارش Google، از PageSpeed Insights یا Lighthouse در Chrome DevTools استفاده کنید.

PageSpeed Insights آدرس عمومی سایت رو روی سرورهای Google بررسی می‌کنه. پس برای localhost، صفحه پشت رمز یا محیط آزمایشی خصوصی مناسب نیست. localhost یعنی سایتی که فقط روی کامپیوتر خودتون اجرا می‌شه و از اینترنت در دسترس نیست.

  • برای صفحه عمومی سایت، PageSpeed Insights یک گزارش استاندارد Google بهتون می‌ده.
  • برای صفحه محلی یا خصوصی، از ابزارهای Performance و Network داخل مرورگر استفاده کنید.
  • امتیاز Lighthouse ممکنه بین چند اجرا تغییر کنه؛ پس فقط به یک عدد تکی تکیه نکنید.
  • دسته‌ها و آزمون‌های Lighthouse با نسخه‌های تازه تغییر می‌کنن؛ برای همین مقاله اون رو به «پنج حوزه ثابت» محدود نمی‌کنه.

این ابزارها مشکل رو پیدا می‌کنن، ولی همیشه خودشون راه‌حل رو اجرا نمی‌کنن. اگه سایتتون با WordPress ساخته شده و گزارش به تصاویر سنگین، فایل‌های بهینه‌نشده یا مشکل کش اشاره می‌کنه، باید هر پیشنهاد رو جدا بررسی کنید. برای آشنایی با اثر این موارد هم راهنمای تأثیر سرعت سایت در سئو بهتون کمک می‌کنه.

افزونه رخش می‌تونه بخشی از کارهای بهینه‌سازی سایت WordPress رو انجام بده و گزارش Core Web Vitals رو نشون بده. Core Web Vitals چند معیار Google برای سنجش سرعت بارگذاری، واکنش‌پذیری و ثبات ظاهری صفحه‌ست. قبل از فعال کردن هر گزینه، بهتره از سایت نسخه پشتیبان بگیرید و نتیجه رو روی محیط آزمایشی بررسی کنید.

ابزارهای بررسی دسترسی‌پذیری

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

ابزارهای توسعه React و Vue

اگه با React یا Vue کار می‌کنید، ابزار توسعه مخصوص اون چارچوب می‌تونه ساختار کامپوننت‌ها و وضعیت برنامه رو نشون بده. کامپوننت یک بخش مستقل رابط کاربریه؛ مثل فرم جست‌وجو یا کارت محصول. برای Vue یک نکته مهم هست: نسخه ۷ ابزار Vue DevTools برای Vue 3 ساخته شده و پروژه‌های Vue 2 به نسخه Legacy نیاز دارن. قبل از نصب، نسخه Vue پروژه‌تون رو بررسی کنید.

افزونه‌های قدیمی‌تر مثل Measure-it و Font Finder

افزونه‌هایی مثل ColorZilla، Measure-it و Font Finder هنوز ممکنه در فهرست‌های قدیمی دیده بشن. Measure-it از ۳۰ ژوئن ۲۰۱۹ نسخه تازه‌ای نگرفته، پس بهتره برای اندازه‌گیری اول از خط‌کش داخلی Firefox استفاده کنید و اون رو پیشنهاد اصلی ندونید. درباره بقیه افزونه‌ها هم تاریخ آخرین نسخه، مجوزها و نام سازنده رو همون روزی که می‌خواید نصب کنید دوباره ببینید.

تست سایت‌های فارسی و راست‌چین با Firefox

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

تست سریع راست‌چین بودن صفحه

روی بخش موردنظرتون راست‌کلیک کنید و Inspect رو بزنید. در پنل Rules یا قوانین، ویژگی direction رو پیدا کنید یا خودتون direction: rtl; رو اضافه کنید. تغییر فقط داخل مرورگر شما و به‌شکل موقتی اعمال می‌شه؛ پس فایل اصلی سایت دست‌نخورده می‌مونه.

حالا فاصله‌ها، جای آیکون‌ها، جهت فلش‌ها و بیرون‌زدگی عناصر رو بررسی کنید. برای فاصله‌های وابسته به جهت صفحه، ویژگی‌هایی مثل margin-inline-start معمولاً انعطاف بیشتری از margin-left دارن. بااین‌حال، قبل از تغییر کد باید پشتیبانی مرورگرهای موردنظرتون رو هم بررسی کنید.

پیدا کردن مشکل فونت فارسی

متن مشکل‌دار رو با Inspect انتخاب کنید و تب Fonts رو باز کنید. قسمت فونت‌های استفاده‌شده نشون می‌ده Firefox واقعاً چه فونتی رو برای اون متن رندر کرده. رندر یعنی تبدیل کد صفحه به چیزی که روی نمایشگر می‌بینید.

اگه فونت موردانتظارتون دیده نمی‌شه، تب Network رو باز کنید، صفحه رو دوباره بارگذاری کنید و درخواست‌ها رو روی Font فیلتر کنید. خطای 404 معمولاً یعنی فایل در مسیر نوشته‌شده پیدا نشده. خطاهای دیگه هم ممکنه به دسترسی بین دامنه‌ها، تنظیم سرور یا فرمت فایل مربوط باشن.

بررسی تأخیر نمایش متن

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

برای آزمایش، در تب Network سرعت اتصال رو روی یک حالت کند بذارید و صفحه رو با پاک شدن کش دوباره بارگذاری کنید. اگه متن دیر ظاهر شد، تنظیم font-display، حجم فایل و ترتیب بارگذاری فونت رو بررسی کنید. font-display: swap در خیلی از پروژه‌ها کمک می‌کنه متن زودتر دیده بشه، ولی برای همه سایت‌ها بهترین انتخاب نیست. پیش‌بارگذاری فونت هم فقط وقتی مفیده که همون فونت در بخش ابتدایی صفحه واقعاً لازم باشه؛ وگرنه ممکنه دانلود منابع مهم‌تر رو عقب بندازه.

بررسی نیم‌فاصله و کاراکترهای نامرئی

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

برای مقایسه، نیم‌فاصله استاندارد فارسی معمولاً کاراکتر Zero Width Non-Joiner با کد U+200C هست. قبل از جایگزینی گروهی متن، حتماً روی یک نمونه آزمایش کنید تا فاصله‌های درست یا محتوای کد خراب نشن.

تست با اتصال کندتر

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

نکات امنیتی قبل از نصب افزونه

بعضی افزونه‌ها می‌تونن محتوای صفحه‌ها یا داده‌های واردشده در سایت رو ببینن. برای کم کردن ریسک، این نکته‌ها رو جدی بگیرید:

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

مدیریت افزونه‌ها و حفظ سرعت مرورگر

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

  • افزونه‌ای رو که موقتاً لازم ندارید غیرفعال کنید. تنظیماتش معمولاً باقی می‌مونه و بعداً می‌تونید دوباره فعالش کنید.
  • افزونه‌های کم‌استفاده رو از نوار ابزار به منوی سرریز منتقل کنید تا محیط مرورگر شلوغ نشه.
  • هر چند وقت یک بار فهرست افزونه‌ها و مجوزهاشون رو مرور کنید و موارد بلااستفاده رو حذف کنید.
  • اگه Firefox کند شده، افزونه‌ها رو یکی‌یکی غیرفعال و نتیجه رو مقایسه کنید. صفحه about:processes هم مصرف منابع تب‌ها و افزونه‌ها رو نشون می‌ده.

سؤالات متداول

چرا Firefox برای طراحی و توسعه سایت مهمه؟

Firefox موتور مستقلی از Chromium داره و برای تست بین‌مرورگری مفیده. Mozilla همچنین قابلیت blocking WebRequest رو حفظ کرده؛ برای همین نسخه کامل بعضی افزونه‌های کنترل محتوا هنوز در Firefox کار می‌کنه.

آیا Google افزونه رسمی Lighthouse برای Firefox داره؟

نه. پروژه رسمی Lighthouse اجرای اون در Chrome DevTools، افزونه Chrome و ابزار خط فرمان رو معرفی می‌کنه. برای گزارش یک سایت عمومی می‌تونید از PageSpeed Insights استفاده کنید، ولی افزونه‌های Firefox با نام Lighthouse لزوماً محصول رسمی Google نیستن.

چند افزونه روی Firefox نصب کنم؟

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

چطور راست‌چین بودن سایت رو سریع آزمایش کنم؟

عنصر موردنظرتون رو با Inspect انتخاب کنید و در پنل Rules ویژگی direction: rtl رو موقتاً اضافه کنید. بعد فاصله‌ها، آیکون‌ها و بیرون‌زدگی بخش‌ها رو بررسی کنید. این تغییر فقط داخل مرورگر شما اعمال می‌شه و کد اصلی سایت رو عوض نمی‌کنه.

چطور بفهمم سایت واقعاً از چه فونتی استفاده می‌کنه؟

متن رو در بازرس انتخاب کنید و تب Fonts رو باز کنید. این بخش فونت رندرشده رو نشون می‌ده. اگه فونت دلخواهتون دیده نمی‌شه، در تب Network درخواست‌های Font رو بررسی کنید تا خطای بارگذاری فایل رو پیدا کنید.

آیا افزونه‌های Chrome مستقیم روی Firefox نصب می‌شن؟

معمولاً نه. خیلی از افزونه‌های شناخته‌شده نسخه جداگانه Firefox دارن، ولی باید همون نسخه رو از مخزن رسمی Firefox بگیرید و نام سازنده و مجوزهاش رو بررسی کنید.

جمع‌بندی

بهترین افزونه‌های Firefox برای طراحان سایت لزوماً طولانی‌ترین فهرست ابزارها نیستن. انتخاب خوب از نیاز واقعی شما شروع می‌شه. برای رنگ، فونت، اسکرین‌شات، اندازه‌گیری و تست موبایل اول ابزارهای داخلی Firefox رو امتحان کنید. برای کارهای تخصصی‌تر هم uBlock Origin، Multi-Account Containers، Web Developer یا یک مدیر کوکی به‌روز می‌تونن مفید باشن.

قبل از نصب، نام سازنده، مجوزها و تاریخ آخرین نسخه رو ببینید. برای گزارش Lighthouse هم سراغ روش‌های رسمی Google برید و افزونه‌های قدیمی یا شخص ثالث رو بدون بررسی پیشنهاد اصلی ندونید. در آخر، سایتتون رو هم در Chrome و هم در Firefox آزمایش کنید؛ چون نتیجه یک مرورگر به‌تنهایی تصویر کاملی از تجربه همه کاربرها نمی‌ده.

شما برای طراحی یا تست سایت از کدوم افزونه Firefox استفاده می‌کنید؟ تجربه‌تون رو در بخش نظرات بنویسید. 🙂

نظر شما در این مورد چیه؟

  1. U32565۲۷ خرداد ۱۴۰۰

    سلام
    عالی بود

    • تیم پشتیبانیتیم پشتیبانی۲۷ خرداد ۱۴۰۰

      سپاس از توجه شما

پشتیبانپشتیبانپشتیبانپشتیبانپشتیبان
تیم میهن وردپرس
پشتیبانپشتیبانپشتیبانپشتیبانپشتیبان
تیم میهن وردپرسآنلاین و پاسخگوی شما هستیم.آنلاین

در حال بارگذاری...

هر سوالی دارید بپرسید.پاسخگوی شما هستیم.