אפשר להחליף בין שכבות-על שונות ולזרז את הניווט בעץ DOM באמצעות ההפניה המקיפה הזו לתגים בחלונית רכיבים.
הצגה או הסתרה של תגים
כך מציגים או מסתירים תגים:
- פותחים את כלי הפיתוח.
- לוחצים לחיצה ימנית על רכיב בעץ ה-DOM ובוחרים באפשרות הגדרות התג....
- מסמנים או מבטלים את הסימון של התיבות ליד התגים שנבחרו.
בחלונית רכיבים מוצגים התגים שנבחרו לצד הרכיבים המתאימים בעץ ה-DOM. הקטעים הבאים מסבירים על כל תג.
מזהה GRid
רכיב 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
שליד הרכיב ומעיינים בשכבת-העל.
בשכבת-העל מוצגים מיקומים של רכיבי צאצא.
למידע על ניפוי באגים בפריסות גמישות, אפשר לעיין במאמר בדיקה וניפוי באגים של שירותי flexbox ב-CSS.
מודעה
כלי הפיתוח יכולים לזהות מסגרות של מודעות ולתייג אותן. ליד פריימים כאלה יש ad
תגים.
אפשר להציג מודעה בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, מחפשים רכיב שלצידו מופיע התג
ad
.
לא ניתן ללחוץ על התג ad
, אבל אפשר להשתמש בכרטיסייה רינדור כדי להדגיש מסגרות של מודעות באדום.
הצמדה וגלילה
רכיב HTML הוא מאגר גלילה אם מאפיין ה-CSS שלו מסוג overflow
מוגדר ל-scroll
או auto
כשיש מספיק תוכן כדי לגרום לגלישה. מאגרי גלילה יכולים לכלול מאפייני CSS שמגדירים נקודות אחיזה. לרכיבים כאלה יש scroll-snap
תגים שמחליפים את שכבות-העל המתאימות.
מציגים או מחליפים את שכבת-העל בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
scroll-snap
לצד הרכיב. - נסו לגלול את הרכיב ימינה כדי לראות את שכבת-העל.
שכבת-העל מציגה את המיקומים של הרכיבים ונקודות הצמדה.
מאגר
רכיב HTML הוא מאגר תגים אם יש לו את מאפיין ה-CSS container-type
. לרכיבים כאלה יש container
תגים שמחליפים את שכבות-העל המתאימות.
מציגים או מחליפים את שכבת-העל בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
container
לצד הרכיב. - נסו לשנות את גודל הרכיב על ידי גרירת הפינה הימנית התחתונה שלו כדי לראות את השינוי בפריסה ואת שכבת-העל.
בשכבת-העל מוצגים מיקומים של רכיבי צאצא.
למידע על ניפוי באגים בשאילתות של מאגרי תגים, אפשר לעיין במאמר בדיקה וניפוי באגים בשאילתות של מאגרי CSS.
משבצת
אלמנט ה-HTML של <slot>
הוא placeholder שאותו אפשר למלא בתוכן משלכם. יחד עם הרכיב <template>
, <slot>
מאפשר ליצור עצי DOM נפרדים ולהציג אותם יחד. לרכיבים בתוכן של משבצות יש slot
תגים שמשמשים כקישורים למיקומי המשבצות המתאימים.
אפשר לראות את התג slot
בתצוגה המקדימה הבאה:
- בודקים את הרכיב בתצוגה המקדימה.
- בעץ ה-DOM, לוחצים על התג
slot
לצד הרכיב כדי לאתר את יחידת הקיבולת (Slot) המתאימה. - כדי לחזור לתוכן של מיקום המודעה, אפשר ללחוץ על התג
reveal
.
שכבה עליונה
התג הזה עוזר להבין את הקונספט של השכבה העליונה ולהציג אותו באופן חזותי. השכבה העליונה מציגה תוכן מעל כל השכבות האחרות, ללא קשר ל-z-index
. כשפותחים רכיב <dialog>
באמצעות השיטה .showModal()
, הדפדפן מוסיף אותו לשכבה העליונה.
כדי לעזור לכם להמחיש רכיבים בשכבה העליונה, החלונית רכיבים מוסיפה מאגר #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>
. לוחצים על התג הזה כדי לפתוח את החלונית מדיה ולנפות באגים במדיה.
מידע נוסף זמין במאמר ניפוי באגים בנגני מדיה באמצעות חלונית המדיה.