Pro

تجسم‌گر Grid/Flex

تجسم‌گر Grid/Flex هر container CSS Grid و Flexbox در یک صفحه وب را شناسایی می‌کند و ساختار چیدمان آن‌ها را به عنوان overlay های رنگارنگ مستقیماً روی صفحه رندر می‌کند. خطوط grid، اندازه‌های track، مقادیر gap و جهت‌های flex را ببینید.

افزودن به Chrome افزودن به Edge افزودن به FireFox

CSS Grid و Flexbox پایه‌های چیدمان وب مدرن هستند، اما به‌طور پیش‌فرض نامرئی هستند. نمی‌توانید خطوط grid، محورهای flex یا مقادیر gap را فقط با نگاه کردن به یک صفحه ببینید. تجسم‌گر Grid/Flex این را کاملاً خودکار می‌کند — صفحه را اسکن می‌کند، هر container Grid و Flex را پیدا می‌کند و ساختار چیدمان آن‌ها را به عنوان overlay های بصری رندر می‌کند.

ویژگی‌های کلیدی

Overlay خط CSS Grid

container های Grid خطوط رنگی برای هر track سطر و ستون نشان می‌دهند. اندازه‌های track (1fr، auto، 200px) روی هر خط برچسب می‌خورند. ناحیه‌های gap با نوارهای نیمه‌شفاف برجسته می‌شوند.

جهت و تراز Flexbox

container های Flex محور اصلی را به عنوان یک فلش (row، row-reverse، column، column-reverse) نشان می‌دهند. justify-content و align-items با شاخص‌های تراز برچسب‌دار تجسم می‌شوند.

شناسایی خودکار همه Container ها

ابزار به‌طور خودکار کل صفحه را اسکن کرده و هر عنصر با display: grid یا display: flex را پیدا می‌کند. نیازی به انتخاب دستی عناصر نیست.

پانل خصوصیات جزئی

روی هر container کلیک کنید تا خصوصیات چیدمان کامل آن را ببینید: grid-template-columns/rows، grid-gap، flex-direction، justify-content، align-items، flex-wrap.

اندازه‌گیری عنصر فرزند

هر عنصر فرزند در یک container Grid یا Flex اندازه رندر شده واقعی، مقادیر flex-grow/shrink و موقعیت grid area خود را نشان می‌دهد.

شناسایی چیدمان تودرتو

container های Grid و Flex تودرتو در سایر container های Grid/Flex را شناسایی می‌کند. overlay هر سطح تودرتو را با رنگ‌های مختلف رندر می‌کند.

موارد استفاده رایج

اشکال‌زدایی اندازه‌گیری Grid Track

یک ستون grid از حد انتظار عریض‌تر یا باریک‌تر است؟ overlay اندازه‌های واقعی track (1fr به 342px، auto به 156px) را نشان می‌دهد.

درک توزیع فضای Flex

چرا یک فرزند flex از دیگری عریض‌تر است؟ تجسم‌گر مقادیر flex-grow، flex-shrink و flex-basis را برای هر فرزند نشان می‌دهد.

تأیید تغییرات Grid واکنش‌گرا

مرورگر را تغییر اندازه دهید و ببینید overlay grid در زمان واقعی به‌روزرسانی می‌شود. ببینید grid-template-columns از «1fr 1fr 1fr» در desktop به «1fr» در موبایل تغییر می‌کند.

یادگیری CSS Grid و Flexbox

از وب‌سایت‌های خوب ساخته‌شده بازدید و ببینید چگونه از Grid و Flex در تولید استفاده می‌کنند. overlay های بصری مفاهیم انتزاعی را ملموس می‌کنند.

ممیزی سازگاری چیدمان

بررسی کنید همه grid های کارت در یک صفحه از همان تعداد ستون و مقادیر gap استفاده می‌کنند. overlay ناسازگاری‌ها را فوراً مرئی می‌کند.

نحوه استفاده

فعال‌سازی تجسم‌گر Grid/Flex

داک شناور DevSuite Pro را باز کنید و روی آیکون تجسم‌گر Grid/Flex کلیک کنید. ابزار صفحه را اسکن کرده و همه container های Grid و Flex را شناسایی می‌کند.

مشاهده Container های شناسایی‌شده

هر container Grid و Flex یک overlay حاشیه رنگی دریافت می‌کند. یک پانل همه container های شناسایی‌شده را با نوع و selector عنصر فهرست می‌کند.

کلیک برای بررسی جزئیات

روی هر container کلیک کنید تا خصوصیات چیدمان کامل آن را ببینید. container های Grid خطوط و اندازه‌های track نشان می‌دهند.

بررسی اندازه‌گیری فرزند

هر عنصر فرزند اندازه محاسبه‌شده و خصوصیات خاص چیدمان را نمایش می‌دهد. بفهمید فضا چگونه بین فرزندان توزیع می‌شود.

خاموش کردن Overlay ها

دوباره روی آیکون ابزار کلیک کنید تا همه overlay ها حذف شوند.