1. مقدمه
DevTools اکنون پشتیبانی بهتری از اشکال زدایی شبکه CSS دارد!
هنگامی که یک عنصر HTML در صفحه شما دارای display: grid
یا display: inline-grid
روی آن اعمال می شود، پنل Elements تعدادی گزینه برای کمک به شما در بازرسی بهتر شبکه ارائه می دهد.
چیزی که یاد خواهید گرفت
این کد لبه به شما می آموزد که چگونه CSS Grid را با ابزارهای توسعه دهنده کروم اشکال زدایی کنید.
- نحوه تغییر ویژگی Grid debugging از پنل Elements
- نحوه سفارشی کردن تنظیمات پوشش شبکه در صفحه Layout
- نحوه ویرایش استایل ها با کمک همپوشانی شبکه
آنچه شما نیاز دارید
- یک کامپیوتر در حال کار و وای فای واقعی
- کروم 87 و بالاتر.
- [اختیاری] درک اولیه از شبکه CSS .
کاری که خواهی کرد
این معما را با کمک ابزارهای اشکال زدایی CSS Grid حل خواهید کرد.
2. شروع کنید
برای باز کردن صفحه پازل روی لینک زیر کلیک کنید:
سپس، در صفحه پازل، Chrome DevTools را باز کنید .
3. پوشش شبکه را فعال کنید
پازل را در پنل Elements بررسی کنید. روی گره ظرف پازل کلیک کرده و تمرکز کنید:
<div class="chrome-puzzle">
در پانل عناصر ، توجه کنید که یک نشان grid
ای در کنار ظرف پازل وجود دارد. برای تغییر همپوشانی شبکه، روی آن کلیک کنید.
این ویدیو نحوه تکمیل مراحل بالا را نمایش می دهد.
4. صفحه نمایش همپوشانی شبکه را سفارشی کنید
در حال حاضر، روکش شبکه با شماره خطوط نمایش داده می شود. بیایید نمایشگر را بیشتر سفارشی کنیم تا به ما در حل معما کمک کند.
روی صفحه Layout کلیک کنید، در منوی کشویی گزینه Hide line labels را انتخاب کنید تا شماره خطوط روی همپوشانی شبکه پنهان شود.
حالا به قسمت Styles بروید و CSS ظرف پازل را بررسی کنید. این شامل یک ویژگی grid-template-areas
است:
.chrome-puzzle {
grid-template-areas:
"top-left top-right"
"bottom-left bottom-right";
}
نام مناطق برای ما برای حل معما مفید است! بیایید تنظیمات را به روز کنیم تا آنها را روی صفحه نمایش دهیم.
به صفحه Layout برگردید، کادر Show area names را فعال کنید.
تا-دا! اکنون پوشش شبکه نام ناحیه هر قطعه پازل را نشان می دهد.
این ویدیو نحوه تکمیل مراحل بالا را نمایش می دهد.
5. پازل را حل کنید
با نمایش نام مناطق روی صفحه، می توانیم کار روی پازل را شروع کنیم.
بیایید تک تک قطعات پازل را در ناحیه درست قرار دهیم.
می توانیم با بررسی اولین قطعه پازل شروع کنیم.
<img src="...-grid-4.png" class="piece-4">
در قسمت Styles ، کلاس CSS قطعه را پیدا کنید:
.piece-4 {
grid-area: auto;
}
منطقه grid-area
در حال حاضر روی auto
شده است. می توانید آن را با نام منطقه صحیح به روز کنید.
این قطعه باید متعلق به کدام منطقه باشد؟ بیایید بگوییم که ناحیه صحیح این قطعه top-right
است، سپس میتوانید مقدار auto
را با top-right
جایگزین کنید. تغییرات را فوراً تجسم کنید. اکنون قطعه در قسمت top-right
قرار گرفته است.
این ویدیو نحوه تکمیل مراحل بالا را نمایش می دهد.
تا زمانی که معما را حل کنید grid-area
هر قطعه را به روز کنید!
6. تبریک می گویم!
تبریک می گویم! شما این نرم افزار کد را با موفقیت تکمیل کردید!
اگر میخواهید درباره ابزارهای اشکالزدایی CSS Grid اطلاعات بیشتری کسب کنید، در اینجا اسناد وجود دارد.