فاحص التخطيط لـ Flexbox وGrid

تضع Chrome DevTools شارة "flex" بجوار عقدة DOM لحاويات flex في لوحة Elements. يؤدي النقر على الشارة إلى تبديل طبقة Flexbox التراكبية، وهي خطوط ملونة توضح المحور الرئيسي والمحور المتقاطع وحدود العناصر وتباعد الفجوات.

تظهر حاويات Grid شارة "grid". يؤدي النقر عليها إلى تبديل الطبقة التراكبية للشبكة، التي تعرض خطوطًا ملونة للأعمدة والصفوف والفجوات. وتظل الطبقات التراكبية الدائمة (المثبتة في لوحة Layout) ظاهرة أثناء تمرير إطار العرض أو تغيير حجمه.

تسرد علامة Layout في Chrome DevTools ← Elements جميع حاويات flex وgrid في الصفحة. يؤدي النقر على اسم حاوية إلى تحديدها في DOM وتبديل طبقتها التراكبية. ويمكن ضبط مظهر الطبقة التراكبية هنا، مثل لون الخط ووضوح التسمية وأحجام المسارات.

تعرض الطبقة التراكبية أسماء المسارات وأحجامها عند تفعيل "Show track sizes". وتعرض الأحجام الجوهرية (auto وmin-content وmax-content) والوحدات الكسرية (fr) قيمها المحلولة بالبكسل، مما يكشف كيفية تقسيم وحدات fr للمساحة المتاحة.

حدّد عنصر flex (عنصرًا فرعيًا لحاوية flex). تعرض لوحة الأنماط توسيع الاختصار flex: — flex-grow وflex-shrink وflex-basis. تبرز طبقة التراكب حجم العنصر على المحور الرئيسي، وقيمة الأساس، وأي نمو أو انكماش طُبّق عليه.

تعرض حاويات Grid التي تستخدم grid-template-areas طبقات تراكب للمناطق المسماة. تُوسم كل منطقة مسماة بلون مميز. يسهّل هذا العرض المرئي التحقق من أن تعيينات grid-area تطابق قالب التخطيط المقصود.

تُميّز DevTools حاويات Subgrid بوضوح. وتتوافق خطوط مساراتها مع مسارات Grid الأصلية، وتعرض طبقة التراكب هذا التوافق بصريًا، مؤكدةً أن عناصر Subgrid تشارك في نظام إحداثيات Grid الأصلية.

غالبًا ما تنتج العناصر غير المحاذاة عن قيم غير صحيحة لـ justify-content أو align-items أو align-self. تعرض طبقة تراكب flex/Grid مواضع العناصر بالنسبة إلى خطوط المحاور. جرّب تبديل خصائص المحاذاة في لوحة الأنماط، ولاحظ تغيّرات طبقة التراكب في الوقت الفعلي.

تعرض طبقة التراكب المسافات الفاصلة بين العناصر على شكل أشرطة ملوّنة. يسهّل ذلك تأكيد قيم gap وتحديد ما إذا كانت المسافة ناتجة عن gap (وهو الأسلوب الصحيح) أو عن margin (التي قد تنهار بشكل غير متوقع في صفوف flex).

تميّز طبقة تراكب Grid بين المسارات الضمنية (التي تُنشأ تلقائيًا لعناصر التجاوز) والمسارات الصريحة (المحددة في grid-template). وتمثل الخطوط المتقطعة المسارات الضمنية. إذا أنشأ المحتوى مسارات ضمنية غير متوقعة، تكشف طبقة التراكب نمط التجاوز فورًا.

اجمع بين Layout Inspector وDevice Mode. غيّر حجم إطار العرض، وراقب في الوقت الفعلي كيف يعيد flex wrap ومسارات grid auto-fill/auto-fit التدفق. يساعد ذلك على اكتشاف أعطال التخطيط المتجاوب في وقت أبكر من تغيير حجم نافذة المتصفح يدويًا.

ما الذي تعرضه طبقة تراكب Grid في DevTools ولا يظهر في الصفحة المعروضة؟

تعمل أداة Layout Inspector الخاصة بـ Flexbox وGrid في DevTools على تصوير خطوط المحاور، وأحجام المسارات، ومسافات الفجوات، والمناطق المسماة، والمسارات الضمنية في طبقات تراكب تفاعلية. وبالاقتران مع لوحة Layout لإدارة طبقات التراكب، تجعل تصحيح أخطاء تخطيطات CSS المعقدة أسرع وأكثر سهولة في الفهم من قراءة CSS وحدها.