במסמך העזרה המקיף הזה מוסבר איך להפעיל או להשבית שכבות-על שונות ולהאיץ את הניווט בעץ DOM באמצעות התגים בחלונית Elements.
הצגה או הסתרה של תגים
כדי להציג או להסתיר תגים מסוימים:
- פותחים את כלי הפיתוח.
- לוחצים לחיצה ימנית על רכיב בעץ ה-DOM ומסמנים תג אחד או יותר בתפריט המשנה Badge settings (הגדרות התגים).
בחלונית Elements (רכיבים) מוצגים התגים שנבחרו לצד הרכיבים המתאימים בעץ ה-DOM. בקטעים הבאים מוסבר על כל תג.
תצוגת רשת
רכיב HTML הוא מאגר של רשת אם נכס ה-CSS display
שלו מוגדר כ-grid
או כ-inline-grid
. לצד רכיבים כאלה מופיעים תגים grid
שמאפשרים להפעיל או להשבית את שכבות-העל התואמות.
מפעילים או משביתים את שכבת-העל בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
grid
לצד הרכיב ומתבוננים בשכבת-העל.
בשכבת-העל מוצגות עמודות, שורות, המספרים שלהן והרווחים ביניהן.
במאמר בדיקת רשת CSS מוסבר איך לנפות באגים בתצוגת הרשת.
רשת משנה
רשת משנה היא רשת בתצוגת עץ שמשתמשת באותם טראקים כמו רשת ההורה שלה. רכיב הוא מאגר של רשת משנה אם אחד או שני המאפיינים grid-template-columns
, grid-template-rows
מוגדרים לערך subgrid
. לצד רכיבים כאלה מופיעים תגים subgrid
שמאפשרים להפעיל או להשבית את שכבות-העל התואמות.
מפעילים או משביתים את שכבת-העל בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
subgrid
לצד הרכיב ומתבוננים בשכבת-העל.
בשכבת-העל מוצגות העמודות, השורות, המספרים שלהן והרווחים של רשת משנה.
Flex
רכיב HTML הוא קונטיינר גמישות אם מאפיין ה-CSS display
שלו מוגדר לערך flex
או inline-flex
. לצד רכיבים כאלה מופיעים תגים flex
שמאפשרים להפעיל או להשבית את שכבות-העל התואמות.
מפעילים או משביתים את שכבת-העל בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
flex
לצד הרכיב ומתבוננים בשכבת-העל.
שכבת-העל מציגה את המיקומים של רכיבי הצאצא.
במאמר בדיקה וניפוי באגים של CSS flexbox מוסבר איך לנפות באגים בתצוגות גמיש.
מודעה
כלי הפיתוח יכולים לזהות מסגרות של מודעות ולתייג אותן. לצד התמונות האלה מופיעים תגי ad
.
מודעה מופיעה בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, מחפשים רכיב עם התג
ad
לידו.
לא ניתן ללחוץ על התג ad
, אבל אפשר להשתמש בכרטיסייה עיבוד כדי להדגיש מסגרות של מודעות באדום.
גלילה
רכיב HTML הוא מאגר גלילה אם מאפיין ה-CSS overflow
שלו מוגדר ל-scroll
, או ל-auto
כשיש מספיק תוכן כדי לגרום לחריגה ממלאי הזיכרון. לצד הרכיבים האלה מופיעים תגים מסוג scroll
.
גלילה עם נקודות עצירה (scroll snapping)
לקונטיינרים של גלילה יכולות להיות תכונות CSS שמגדירות נקודות הצמדה. לצד רכיבים כאלה מופיעים תגים scroll-snap
שמאפשרים להפעיל או להשבית את שכבות-העל התואמות.
מפעילים או משביתים את שכבת-העל בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
scroll-snap
לצד הרכיב. - נסו לגלול את הרכיב שמאלה ולבחון את שכבת-העל.
בשכבת-העל מוצגים מיקומי הרכיבים ונקודות הצמדה.
מאגר
רכיב HTML הוא מאגר אם יש לו את מאפיין ה-CSS container-type
. לצד רכיבים כאלה מופיעים תגים container
שמאפשרים להפעיל או להשבית את שכבות-העל התואמות.
מפעילים או משביתים את שכבת-העל בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
container
לצד הרכיב. - נסו לשנות את גודל הרכיב על ידי גרירה של הפינה הימנית התחתונה שלו, ולראות איך הפריסה והשכבה העליונה משתנות.
שכבת-העל מציגה את המיקומים של רכיבי הצאצא.
במאמר בדיקה וניפוי באגים של שאילתות בקונטיינרים של CSS מוסבר איך מנפים באגים בשאילתות בקונטיינרים.
משבצת
רכיב ה-HTML <slot>
הוא placeholder שאפשר למלא בתוכן משלכם. יחד עם הרכיב <template>
, הרכיב <slot>
מאפשר ליצור עצי DOM נפרדים ולהציג אותם יחד. לצד רכיבי התוכן של חריצי המודעות מופיעים תגים מסוג slot
, שמשמשים כקישורים לחריצים התואמים.
התג slot
מופיע בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
slot
לצד הרכיב כדי לאתר את החריץ התואם. - כדי לחזור לתוכן של המקום, לוחצים על התג
reveal
.
השכבה העליונה
התג הזה עוזר לכם להבין את המושג שכבת-על ולהציג אותו באופן חזותי. השכבה העליונה מרינדרת תוכן מעל כל השכבות האחרות, ללא קשר ל-z-index
. כשפותחים רכיב <dialog>
באמצעות השיטה .showModal()
, הדפדפן מעביר אותו לשכבה העליונה.
כדי לעזור לכם לראות את הרכיבים בשכבה העליונה, בחלונית Elements (רכיבים) מתווסף מאגר #top-layer
לעץ ה-DOM אחרי תג ה-</html>
הסגור.
לרכיבים בשכבה העליונה מצורפים תגים מסוג top-layer (N)
, כאשר N
הוא מספר האינדקס של הרכיב. התגים הם קישורים לרכיבים התואמים בקונטיינר #top-layer
.
התג top-layer (N)
מופיע בתצוגה המקדימה הבאה:
- בתצוגה המקדימה, לוחצים על פתיחת תיבת דו-שיח.
- בודקים את תיבת הדו-שיח.
- בעץ ה-DOM, לוחצים על התג
top-layer (1)
שליד הרכיב<dialog>
. החלונית Elements (רכיבים) תעביר אתכם לרכיב התואם בקונטיינר#top-layer
אחרי תג ה-</html>
הסגור. - כדי לחזור לרכיב
<dialog>
, לוחצים על התגreveal
שליד הרכיב או ה-::backdrop
שלו.
מדיה
התג media
מושבת כברירת מחדל. כשהיא מופעלת, היא מופיעה לצד הרכיבים <audio>
ו-<video>
. לוחצים על התג הזה כדי לפתוח את החלונית מדיה ולפתור באגים בקוד של המדיה.
מידע נוסף זמין במאמר ניפוי באגים בנגני מדיה באמצעות חלונית המדיה.