نکات DevTools: نحوه بازرسی و اشکال زدایی CSS flexbox

سوفیا املیانوا
Sofia Emelianova

Chrome DevTools اشکال‌زدایی طرح‌بندی‌های flexbox CSS را بصری می‌کند. پنل Elements یک ویرایشگر Flexbox آگاه از متن و پوشش قابل تنظیم را در اختیار شما قرار می دهد.

ویدیو را تماشا کنید تا یاد بگیرید چگونه:

  • از ویرایشگر Flexbox برای تغییر ویژگی های flexbox با یک کلیک به جای تایپ کردن آنها استفاده کنید.
  • برای مشاهده تغییراتی که فوراً ایجاد می‌کنید، پوشش flexbox را در نمای نمایش تغییر دهید.
  • از قسمت Elements > Layout > Flexbox استفاده کنید تا لیستی از تمام عناصر را ببینید و آنها را در درخت DOM قرار دهید. علاوه بر این، می توانید رنگ های پوشش را در اینجا سفارشی کنید.

برای کسب اطلاعات بیشتر درباره CSS flexbox به طور کلی، به Learn CSS > Flexbox مراجعه کنید.

برای تجربه بیشتر اشکال‌زدایی در DevTools، آموزش طرح‌بندی CSS flexbox را بررسی و اشکال‌زدایی کنید .