Flexbox Inspector و Grid Inspector؛ دیدن چیدمان‌های پیچیده به‌صورت زنده

تو درس قبل به‌طور مختصر به ابزار overlay مخصوص Grid و Flexbox اشاره کردیم. حالا وقتشه یه درس مستقل بهش اختصاص بدیم، چون این دو ابزار احتمالاً بیشترین تأثیر رو رو سرعت دیباگ کردن چیدمان‌های فصل ۱۲ و ۱۳ (Flexbox و Grid) دارن؛ چیزهایی که تو کد فقط چند خط CSS به نظر می‌رسن، اینجا کاملاً قابل‌مشاهده و قابل‌اندازه‌گیری می‌شن.

چطور Flexbox Inspector رو فعال کنیم؟

وقتی یه المنت با display: flex (یا inline-flex) رو تو پنل Elements انتخاب می‌کنید، کنار همین خط تو پنل Styles یه آیکون کوچیک flex ظاهر می‌شه. با کلیک روش، مرورگر مستقیم رو صفحه‌ی وب، خطوط راهنمای محور اصلی (main axis) و محور عرضی (cross axis) رو رسم می‌کنه:

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

با فعال بودن overlay، دقیقاً می‌بینید محور اصلی از کدوم جهت شروع می‌شه (که با flex-direction عوض می‌شه)، فاصله‌ی واقعی gap بین آیتم‌ها چقدره، و چطور justify-content: space-between فضای خالی رو بین آیتم‌ها پخش کرده.

پنل جانبی Flexbox: تنظیمات زنده و قابل‌تغییر

کنار overlay خود صفحه، معمولاً یه پنل جدا هم باز می‌شه (تو Chrome معمولاً تب جدید کنار Styles) که همه‌ی ویژگی‌های flex کانتینر رو با دراپ‌داون یا دکمه نشون می‌ده: flex-direction، flex-wrap، justify-content، align-items و غیره. با کلیک رو هر گزینه، بلافاصله تغییر رو صفحه اعمال می‌شه، بدون این‌که مجبور باشید برید تو فایل CSS و دستی مقدار رو عوض کنید:

/* تست سریع تو DevTools، بدون لمس فایل اصلی */
.toolbar {
  justify-content: center; /* امتحان یه مقدار دیگه */
}

این خصوصاً وقتی مفیده که نمی‌دونید کدوم مقدار align-items یا justify-content دقیقاً نتیجه‌ی موردنظرتون رو می‌ده؛ به‌جای این‌که چندین بار فایل رو ویرایش و ذخیره کنید، همه‌ی گزینه‌ها رو سریع تو مرورگر امتحان می‌کنید.

دیدن flex-grow، flex-shrink و flex-basis روی هر آیتم

یه بخش کمتر شناخته‌شده اما خیلی کاربردی: وقتی خود یه flex item (نه کانتینرش) رو انتخاب کنید، DevTools معمولاً یه بخش جدا نشون می‌ده که دقیقاً می‌گه این آیتم چقدر flex-grow یا flex-shrink فعال داشته و سایز نهایی محاسبه‌شده‌ش (بعد از توزیع فضای اضافی یا کمبود فضا) چقدره. این دقیقاً همون چیزیه که تو فصل ۱۲ به‌صورت تئوری حساب می‌کردیم؛ اینجا مرورگر خودش محاسبه رو انجام داده و نتیجه رو نشون می‌ده.

Grid Inspector: مشابه ولی با جزئیات بیشتر

Grid به‌خاطر دو‌بعدی بودنش، جزئیات بیشتری برای نمایش داره. با فعال کردن overlay رو یه display: grid، مرورگر خطوط ستون و ردیف رو با شماره مشخص می‌کنه:

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

یه قابلیت خیلی کاربردی اینجا، نمایش شماره‌ی خطوط (line numbers) مستقیم رو صفحه‌ست؛ یعنی وقتی تو CSS می‌نویسید grid-column: 2 / 4، می‌تونید دقیقاً رو صفحه ببینید خط ۲ و خط ۴ کجان، بدون این‌که مجبور باشید تو ذهنتون بشمرید.

نمایش اسم خطوط (Named Lines) و ناحیه‌ها (Grid Areas)

اگه تو فصل ۱۳ از grid-template-areas یا خطوط اسم‌گذاری‌شده استفاده کرده باشید، Grid Inspector این اسم‌ها رو هم مستقیم رو overlay نشون می‌ده:

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

با فعال بودن overlay، اسم هر ناحیه (مثل sidebar یا content) مستقیم رو همون بخش از صفحه نوشته می‌شه؛ این کمک می‌کنه سریع بفهمید آیا یه المنت واقعاً تو ناحیه‌ای که فکر می‌کردید قرار گرفته یا نه.

Track Sizes: دیدن مقدار واقعی fr و auto

یکی از سردرگم‌کننده‌ترین بخش‌های Grid، فهمیدن اینه که واحد fr یا auto دقیقاً به چند پیکسل واقعی تبدیل شده. Grid Inspector این مقدار محاسبه‌شده رو مستقیم کنار هر خط نشون می‌ده:

.layout {
  grid-template-columns: 200px 1fr 2fr;
}
/* overlay نشون می‌ده مثلاً: 200px, 315px, 630px */

این دقیقاً همون چیزیه که تو فصل Grid فقط با فرمول محاسبه می‌کردیم؛ اینجا دیگه نیازی به محاسبه‌ی دستی نیست.

Subgrid Inspector

تو فصل ۲۱ با subgrid آشنا شدیم. مرورگرهای مدرن‌تر، overlay رو برای subgrid هم پشتیبانی می‌کنن؛ یعنی وقتی یه grid فرزند با grid-template-rows: subgrid رو انتخاب کنید، می‌تونید ببینید دقیقاً کدوم خطوط از grid والد رو به ارث برده و آیا واقعاً هم‌تراز شدن یا نه. این برای دیباگ مشکلات هم‌ترازی که تو فصل ۲۱ بهشون اشاره کردیم خیلی کاربردیه.

نکته مهم: اگه صفحه‌تون چند تا Grid یا Flexbox هم‌زمان داره و overlay هاشون رو با هم قاطی می‌کنید، از پنل «Layout» (که تو بعضی مرورگرها به‌عنوان یه تب جدا کنار Elements هست) استفاده کنید؛ اونجا لیست کامل همه‌ی grid و flex container های صفحه رو می‌بینید و می‌تونید هرکدوم رو جدا تیک بزنید تا فقط همون overlay فعال بشه.

اشتباه رایج: تکیه‌ی کامل به overlay بدون چک کردن پنل Computed

Overlay ها برای فهم بصری و سریع فوق‌العاده‌ن، ولی گاهی برای دقیق‌ترین عدد ممکن (مثلاً وقتی یه محاسبه‌ی calc() پیچیده تو grid-template-columns دارید)، باید همچنان سراغ پنل Computed هم برید تا مقدار نهایی دقیق رو با عدد ببینید، نه فقط تخمین بصری overlay رو.

جمع‌بندی

Flexbox Inspector و Grid Inspector، محورها، خطوط، فاصله‌ها و مقادیر محاسبه‌شده‌ی چیدمان‌های flex و grid رو مستقیم رو صفحه‌ی وب نشون می‌دن؛ چیزی که تو فصل‌های ۱۲ و ۱۳ فقط با فرمول و تئوری یاد گرفتیم، اینجا کاملاً بصری و زنده می‌شه. پنل جانبی هم اجازه می‌ده مقادیری مثل justify-content یا flex-wrap رو بدون لمس فایل CSS، سریع امتحان کنید.