با این مرجع جامع نشان ها در پانل عناصر، همپوشانی های مختلف را تغییر دهید و به پیمایش درخت DOM سرعت ببخشید.
برای نمایش یا پنهان کردن نشان ها:
- DevTools را باز کنید .
- روی یک عنصر در درخت DOM کلیک راست کرده و تنظیمات نشان را انتخاب کنید... .
- کادرهای کنار نشان های انتخابی را انتخاب یا پاک کنید.
پانل Elements نشان های انتخاب شده را در کنار عناصر مناسب در درخت DOM نشان می دهد. بخش های بعدی هر نشان را توضیح می دهد.
یک عنصر HTML یک محفظه شبکه است اگر ویژگی CSS display آن روی grid یا inline-grid تنظیم شده باشد. چنین عناصری دارای نشان های grid در کنار خود هستند که همپوشانی های مربوطه را تغییر می دهند.
همپوشانی را در پیش نمایش زیر تغییر دهید:
- عنصر را در پیش نمایش بررسی کنید .
- در درخت DOM، روی نشان
gridدر کنار عنصر کلیک کنید و همپوشانی را مشاهده کنید.
روکش ستون ها، ردیف ها، تعداد آنها و شکاف ها را نشان می دهد.
برای یادگیری نحوه اشکال زدایی طرح بندی شبکه، به بررسی شبکه CSS مراجعه کنید.
زیرشبکه یک شبکه تودرتو است که از همان مسیرهای شبکه اصلی خود استفاده می کند. یک عنصر یک محفظه زیرشبکه است اگر یک یا هر دو ویژگی grid-template-columns ، grid-template-rows روی subgrid تنظیم شده باشد. چنین عناصری دارای نشان های subgrid در کنار خود هستند که همپوشانی های مربوطه را تغییر می دهند.
همپوشانی را در پیش نمایش زیر تغییر دهید:
- عنصر را در پیش نمایش بررسی کنید .
- در درخت DOM، روی نشان
subgridدر کنار عنصر کلیک کنید و همپوشانی را مشاهده کنید.
روکش ستون ها، ردیف ها، تعداد آنها و شکاف های یک زیرشبکه را نشان می دهد.
یک عنصر HTML یک محفظه انعطاف پذیر است اگر ویژگی CSS display آن روی flex یا inline-flex تنظیم شده باشد. چنین عناصری دارای نشان های flex در کنار خود هستند که همپوشانی های مربوطه را تغییر می دهند.
همپوشانی را در پیش نمایش زیر تغییر دهید:
- عنصر را در پیش نمایش بررسی کنید .
- در درخت DOM، روی نشان
flexدر کنار عنصر کلیک کنید و همپوشانی را مشاهده کنید.
روکش موقعیت های عنصر فرزند را نشان می دهد.
برای یادگیری نحوه اشکال‌زدایی طرح‌بندی‌های flex، به بررسی و اشکال‌زدایی CSS flexbox مراجعه کنید.
DevTools می تواند برخی از فریم های تبلیغاتی را شناسایی کرده و آنها را برچسب گذاری کند . چنین قاب هایی دارای نشان ad در کنار خود هستند.
یک تبلیغ را در پیش نمایش زیر کشف کنید:
- عنصر را در پیش نمایش بررسی کنید .
- در درخت DOM، عنصری را با نشان
adدر کنار آن پیدا کنید.
نشان ad قابل کلیک نیست، اما می‌توانید از تب Rendering برای برجسته کردن فریم‌های تبلیغاتی با رنگ قرمز استفاده کنید.
یک عنصر HTML یک محفظه اسکرول است اگر ویژگی CSS overflow آن روی scroll تنظیم شده باشد، یا زمانی که محتوای کافی برای ایجاد سرریز وجود دارد، auto . محفظه‌های اسکرول می‌توانند دارای ویژگی‌های CSS باشند که نقاط snap را پیکربندی می‌کنند . چنین عناصری دارای نشان‌های scroll-snap در کنار خود هستند که همپوشانی‌های مربوطه را تغییر می‌دهند.
همپوشانی را در پیش نمایش زیر تغییر دهید:
- عنصر را در پیش نمایش بررسی کنید .
- در درخت DOM، روی نشان
scroll-snapدر کنار عنصر کلیک کنید. - سعی کنید عنصر را به سمت راست پیمایش کنید و پوشش را مشاهده کنید.
روکش موقعیت عناصر و نقاط ضربه ای را نشان می دهد.
یک عنصر HTML در صورتی یک ظرف است که دارای ویژگی CSS container-type باشد. چنین عناصری دارای نشان های container در کنار آنها هستند که همپوشانی های مربوطه را تغییر می دهند.
همپوشانی را در پیش نمایش زیر تغییر دهید:
- عنصر را در پیش نمایش بررسی کنید .
- در درخت DOM، روی نشان
containerکنار عنصر کلیک کنید. - سعی کنید اندازه عنصر را با کشیدن گوشه سمت راست پایین آن تغییر دهید و تغییر طرح و پوشش را مشاهده کنید.
روکش موقعیت های عنصر فرزند را نشان می دهد.
برای یادگیری نحوه اشکال‌زدایی عبارت‌های کانتینر، به بررسی و اشکال‌زدایی عبارت‌های کانتینر CSS مراجعه کنید.
عنصر <slot> HTML مکانی است که می توانید آن را با محتوای خود پر کنید. همراه با عنصر <template> ، <slot> به شما امکان می‌دهد درخت‌های DOM جداگانه ایجاد کرده و آنها را با هم ارائه دهید. عناصر محتوای اسلات دارند نشان های
slot در کنار آنها که به عنوان پیوند به اسلات های مربوطه عمل می کنند.
کشف کنید نشان
slot در پیش نمایش زیر:
- عنصر را در پیش نمایش بررسی کنید .
- در درخت DOM، روی
نشان
slotدر کنار عنصر برای تعیین محل شکاف مربوطه. - با کلیک کردن بر روی آن به محتوای اسلات بازگردید
نشان
reveal
این نشان به شما کمک می کند مفهوم لایه بالایی را درک کرده و آن را تجسم کنید. لایه بالایی محتوا را بدون در نظر گرفتن z-index در بالای همه لایه‌های دیگر ارائه می‌کند. هنگامی که یک عنصر <dialog> را با استفاده از متد .showModal() باز می کنید، مرورگر آن را در لایه بالایی قرار می دهد.
برای کمک به تجسم عناصر لایه بالایی، پانل Elements پس از بسته شدن تگ </html> ، یک ظرف #top-layer به درخت DOM اضافه می کند.
عناصر لایه بالایی دارند نشان های
top-layer (N) در کنار آنها، جایی که N عدد شاخص عنصر است. نشان ها پیوندهایی به عناصر مربوطه در ظرف #top-layer هستند.
کشف کنید نشان
top-layer (N) در پیش نمایش زیر:
- در پیش‌نمایش، روی باز کردن گفتگو کلیک کنید.
- گفتگو را بررسی کنید .
- در درخت DOM، روی
نشان
top-layer (1)در کنار عنصر<dialog>. پانل Elements شما را بعد از بستن تگ</html>به عنصر مربوطه در ظرف#top-layerمی برد. - با کلیک کردن بر روی عنصر
<dialog>برگردیدنشان را در کنار عنصر یا
::backdropآنreveal.
نشان media به طور پیش فرض خاموش است. هنگامی که روشن است ، در کنار عناصر <audio> و <video> ظاهر می شود. روی این نشان کلیک کنید تا پانل رسانه باز شود و رسانه خود را دیباگ کند.
برای اطلاعات بیشتر، به اشکال زدایی پخش کننده های رسانه با پانل رسانه مراجعه کنید.