הפנייה לתגים

אפשר להחליף בין שכבות-על שונות ולזרז את הניווט בעץ DOM באמצעות ההפניה המקיפה הזו לתגים בחלונית רכיבים.

הצגה או הסתרה של תגים

כך מציגים או מסתירים תגים:

1. פותחים את כלי הפיתוח.
2. לוחצים לחיצה ימנית על רכיב בעץ ה-DOM ובוחרים באפשרות הגדרות התג....
3. מסמנים או מבטלים את הסימון של התיבות ליד התגים שנבחרו.

בחלונית רכיבים מוצגים התגים שנבחרו לצד הרכיבים המתאימים בעץ ה-DOM. הקטעים הבאים מסבירים על כל תג.

מזהה GRid

רכיב HTML הוא מאגר תגים של רשת אם מאפיין ה-CSS שלו מסוג display מוגדר ל-grid או ל-inline-grid. לרכיבים כאלה יש grid תגים שמחליפים את שכבות-העל המתאימות.

מציגים או מחליפים את שכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג grid שליד הרכיב ומעיינים בשכבת-העל.

בשכבת-העל מוצגות עמודות, שורות, המספרים והפערים.

במאמר בדיקת רשת CSS מוסבר איך לנפות באגים בפריסת רשת.

רשת משנה

רשת משנה היא רשת מקוננת שמשתמשת באותם מסלולים כמו הרשת הראשית שלה. רכיב הוא מאגר תת-רשת אם אחד מהמאפיינים grid-template-columns, grid-template-rows שלו או שניהם מוגדרים כ-subgrid. לרכיבים כאלה יש subgrid תגים שמחליפים את שכבות-העל המתאימות.

מציגים או מחליפים את שכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג subgrid שליד הרכיב ומעיינים בשכבת-העל.

שכבת-העל מציגה עמודות, שורות, את המספרים שלהם ואת הפערים ברשת משנה.

Flex

רכיב HTML הוא מאגר תגים גמיש אם מאפיין ה-CSS שלו מסוג display מוגדר ל-flex או ל-inline-flex. לרכיבים כאלה יש flex תגים שמחליפים את שכבות-העל המתאימות.

מציגים או מחליפים את שכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג flex שליד הרכיב ומעיינים בשכבת-העל.

בשכבת-העל מוצגים מיקומים של רכיבי צאצא.

למידע על ניפוי באגים בפריסות גמישות, אפשר לעיין במאמר בדיקה וניפוי באגים של שירותי flexbox ב-CSS.

מודעה

כלי הפיתוח יכולים לזהות מסגרות של מודעות ולתייג אותן. ליד פריימים כאלה יש ad תגים.

אפשר להציג מודעה בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, מחפשים רכיב שלצידו מופיע התג ad.

לא ניתן ללחוץ על התג ad, אבל אפשר להשתמש בכרטיסייה רינדור כדי להדגיש מסגרות של מודעות באדום.

הצמדה וגלילה

רכיב HTML הוא מאגר גלילה אם מאפיין ה-CSS שלו מסוג overflow מוגדר ל-scroll או auto כשיש מספיק תוכן כדי לגרום לגלישה. מאגרי גלילה יכולים לכלול מאפייני CSS שמגדירים נקודות אחיזה. לרכיבים כאלה יש scroll-snap תגים שמחליפים את שכבות-העל המתאימות.

מציגים או מחליפים את שכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג scroll-snap לצד הרכיב.
3. נסו לגלול את הרכיב ימינה כדי לראות את שכבת-העל.

שכבת-העל מציגה את המיקומים של הרכיבים ונקודות הצמדה.

מאגר

רכיב HTML הוא מאגר תגים אם יש לו את מאפיין ה-CSS container-type. לרכיבים כאלה יש container תגים שמחליפים את שכבות-העל המתאימות.

מציגים או מחליפים את שכבת-העל בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג container לצד הרכיב.
3. נסו לשנות את גודל הרכיב על ידי גרירת הפינה הימנית התחתונה שלו כדי לראות את השינוי בפריסה ואת שכבת-העל.

בשכבת-העל מוצגים מיקומים של רכיבי צאצא.

למידע על ניפוי באגים בשאילתות של מאגרי תגים, אפשר לעיין במאמר בדיקה וניפוי באגים בשאילתות של מאגרי CSS.

משבצת

אלמנט ה-HTML של <slot> הוא placeholder שאותו אפשר למלא בתוכן משלכם. יחד עם הרכיב <template>, <slot> מאפשר ליצור עצי DOM נפרדים ולהציג אותם יחד. לרכיבים בתוכן של משבצות יש slot תגים שמשמשים כקישורים למיקומי המשבצות המתאימים.

אפשר לראות את התג slot בתצוגה המקדימה הבאה:

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג slot לצד הרכיב כדי לאתר את יחידת הקיבולת (Slot) המתאימה.
3. כדי לחזור לתוכן של מיקום המודעה, אפשר ללחוץ על התג reveal.

שכבה עליונה

התג הזה עוזר להבין את הקונספט של השכבה העליונה ולהציג אותו באופן חזותי. השכבה העליונה מציגה תוכן מעל כל השכבות האחרות, ללא קשר ל-z-index. כשפותחים רכיב <dialog> באמצעות השיטה .showModal(), הדפדפן מוסיף אותו לשכבה העליונה.

כדי לעזור לכם להמחיש רכיבים בשכבה העליונה, החלונית רכיבים מוסיפה מאגר #top-layer לעץ ה-DOM אחרי תג </html> הסוגר.

לרכיבים בשכבה העליונה יש top-layer (N) תגים, כאשר N הוא מספר האינדקס של הרכיב. התגים הם קישורים לרכיבים המתאימים במאגר התגים #top-layer.

אפשר לראות את התג top-layer (N) בתצוגה המקדימה הבאה:

1. בתצוגה המקדימה, לוחצים על פתיחה של תיבת דו-שיח.
2. בודקים את תיבת הדו-שיח.
3. בעץ ה-DOM, לוחצים על התג top-layer (1) לצד הרכיב <dialog>. החלונית Elements מעבירה אתכם לרכיב המתאים במאגר התגים #top-layer אחרי תג </html> הסוגר.
4. כדי לחזור לרכיב <dialog>, לוחצים על התג reveal לצד הרכיב או ה::backdrop שלו.

מדיה

התג media מושבת כברירת מחדל. כשהיא מופעלת, היא מופיעה ליד הרכיבים <audio> ו-<video>. לוחצים על התג הזה כדי לפתוח את החלונית מדיה ולנפות באגים במדיה.

מידע נוסף זמין במאמר ניפוי באגים בנגני מדיה באמצעות חלונית המדיה.