دیباگ کردن Responsive Design؛ تست کردن بدون نیاز به ده‌ها دستگاه واقعی

تو فصل ۱۴ با Responsive Web Design و media query ها آشنا شدیم، و تو فصل ۲۱ هم عمیق‌تر سراغ container query ها رفتیم. اما نوشتن این قوانین فقط نصف کاره؛ باید مطمئن بشید تو سایزهای مختلف واقعاً همون‌جوری که فکر می‌کردید رفتار می‌کنن. خوشبختانه لازم نیست یه گنجینه از موبایل و تبلت واقعی داشته باشید؛ DevTools ابزارهای قدرتمندی برای شبیه‌سازی این سناریوها داره.

Device Toolbar: اولین ابزار برای تست ریسپانسیو

تو اکثر مرورگرها، یه آیکون شبیه موبایل و تبلت کنار هم (تو Chrome معمولاً کنار آیکون Inspect) وجود داره، یا با Ctrl+Shift+M (Cmd+Shift+M رو مک) فعال می‌شه. با فعال کردنش، صفحه به یه حالت شبیه‌سازی‌شده می‌ره که می‌تونید عرض و ارتفاع viewport رو دستی یا از یه لیست دستگاه‌های از پیش تعریف‌شده (مثل iPhone یا Galaxy) انتخاب کنید.

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

با تغییر عرض viewport تو device toolbar از بالای ۷۶۸ به پایین‌تر، بلافاصله می‌بینید این قانون کِی فعال می‌شه و .sidebar کِی ناپدید می‌شه، بدون این‌که نیاز باشه واقعاً پنجره‌ی مرورگر رو دستی کوچیک کنید.

خط نشون‌دهنده‌ی breakpoint فعال

یه قابلیت خیلی کاربردی: وقتی عرض viewport رو تغییر می‌دید، DevTools معمولاً یه خط آبی کوچیک بالای نوار عرض نشون می‌ده که دقیقاً می‌گه کدوم breakpoint (کدوم @media) الان فعاله. با کلیک رو این خط، می‌تونید مستقیم بپرید به همون عرض دقیقی که breakpoint توش تغییر می‌کنه؛ این برای تست دقیق لبه‌ی هر breakpoint (نه فقط یه عدد گرد دلخواه) خیلی مفیده.

شبیه‌سازی device pixel ratio

یه نکته‌ی ظریف که خیلی وقت‌ها نادیده گرفته می‌شه: موبایل‌های مدرن معمولاً یه device pixel ratio بیشتر از ۱ دارن (مثلاً ۲ یا ۳)، یعنی هر پیکسل CSS با چند پیکسل فیزیکی واقعی نمایش داده می‌شه. Device Toolbar اجازه می‌ده این نسبت رو هم شبیه‌سازی کنید تا ببینید مثلاً یه تصویر یا فونت روی صفحه‌های با تراکم بالا چطور به نظر می‌رسه؛ این خصوصاً برای چک کردن کیفیت تصاویر srcset یا خطوط نازک border که ممکنه رو صفحات retina محو به نظر برسن مهمه.

شبیه‌سازی touch events

وقتی device toolbar فعاله، مرورگر رویدادهای موس رو به رویدادهای touch شبیه‌سازی می‌کنه؛ یعنی می‌تونید رفتارهایی مثل :hover رو تو محیط موبایل تست کنید (که تو دستگاه واقعی لمسی، اصلاً معنای همیشگی :hover رو نداره). این کمک می‌کنه بفهمید آیا افکت‌های hover که نوشتید، تو موبایل واقعی گیر می‌کنن (چسبیده می‌مونن) یا رفتار عجیبی دارن.

Responsive Design Mode برای دیدن چند سایز هم‌زمان

بعضی مرورگرها (مثل Firefox) یه حالت دارن که چند viewport با سایزهای مختلف رو هم‌زمان کنار هم نشون می‌ده، تا بدون این‌که مدام بین سایزها جابه‌جا بشید، تفاوت چیدمان موبایل و دسکتاپ رو مستقیم و کنار هم مقایسه کنید. این خصوصاً برای چک کردن سریع این‌که آیا یه تغییر جدید تو یه breakpoint، breakpoint های دیگه رو خراب کرده یا نه مفیده.

دیباگ container query ها: چالش متفاوت از media query

تو فصل ۲۱ دیدیم container query بر اساس سایز والد کار می‌کنه، نه viewport. این یعنی برای دیباگش، فقط تغییر عرض کل مرورگر کافی نیست؛ باید عرض همون container خاص رو عوض کنید. راه‌حل عملی، انتخاب خود المنتی که container-type روش تنظیم شده و استفاده از نمودار Box Model (که تو درس‌های قبل دیدیم) یا تغییر دستی عرضش تو پنل Styles برای دیدن رفتار @container:

.card-wrapper {
  container-type: inline-size;
  max-width: 500px; /* این عدد رو موقت تو DevTools عوض کنید تا breakpoint container تست بشه */
}

تست prefers-color-scheme و prefers-reduced-motion از داخل DevTools

تو فصل ۲۳ دیدیم که تغییر این تنظیمات معمولاً نیاز به رفتن تو تنظیمات سیستم‌عامل داره. اما DevTools یه راه میان‌بر داره: تو بخش «Rendering» (که معمولاً باید از منوی more tools فعالش کنید)، می‌تونید مستقیم prefers-color-scheme و prefers-reduced-motion رو شبیه‌سازی کنید، بدون این‌که واقعاً تنظیمات سیستم‌عامل خودتون رو عوض کنید؛ این خیلی سریع‌تر از رفتن تو تنظیمات ویندوز یا مک برای هر تسته.

throttling شبکه: دیدن رفتار روی اتصال کند

تو فصل پرفورمنس دیدیم که تست کردن فقط رو وای‌فای سریع دفتر کار، تصویر واقعی رو نشون نمی‌ده. تب Network تو DevTools یه دراپ‌داون داره (معمولاً «No throttling» به‌طور پیش‌فرض) که می‌تونید به «Slow 3G» یا مشابهش تغییرش بدید تا ببینید صفحه، خصوصاً از نظر layout shift (فصل ۲۴)، رو یه اتصال کند چطور رفتار می‌کنه.

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

اشتباه رایج: تست فقط رو عرض‌های استاندارد و رند

خیلی از توسعه‌دهنده‌ها فقط رو عرض‌های معروف (۳۷۵px، ۷۶۸px، ۱۰۲۴px) تست می‌کنن، در حالی که مشکلات واقعی اغلب دقیقاً رو لبه‌ی breakpoint ها (مثلاً ۷۶۷px یا ۷۶۹px) یا رو عرض‌های غیرمعمول (مثل یه پنجره‌ی مرورگر که کاربر دستی نصفه کرده) اتفاق میفتن. بهترین روش، کشیدن دستی لبه‌ی device toolbar از عرض خیلی کوچیک تا خیلی بزرگ و مشاهده‌ی مداوم چیدمان تو کل این بازه‌ست، نه فقط پرش بین چند عدد ثابت.

جمع‌بندی

Device Toolbar اجازه می‌ده بدون دستگاه فیزیکی، عرض viewport، device pixel ratio و رویدادهای touch رو شبیه‌سازی کنید، و خط breakpoint دقیقاً نشون می‌ده کدوم media query الان فعاله. برای container query ها باید عرض خود container رو (نه کل viewport) تغییر بدید. بخش Rendering امکان تست prefers-color-scheme و prefers-reduced-motion بدون تغییر تنظیمات سیستم‌عامل رو می‌ده، و throttling شبکه کمک می‌کنه رفتار واقعی رو شرایط کند هم دیده بشه.