הפנייה לתגים

במאמר הזה מוסבר על כל התגים בחלונית Elements. בעזרת התגים האלה אפשר להפעיל או להשבית שכבות-על שונות ולנווט מהר יותר בעץ ה-DOM.

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

כדי להציג או להסתיר תגים מסוימים:

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

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

הצגת המקור

התג view-source מופיע לצד התג <html> בשורש של דף ה-HTML. לוחצים עליו כדי לראות את מקור הדף בחלונית מקורות.

התג הזה מספק תהליך עבודה חלופי לאפשרות הצגת מקור הדף בתפריט ההקשר של הדף ב-Chrome (לחיצה ימנית):

1. ב-Chrome, לוחצים לחיצה ימנית > בדיקה של דף.
2. בחלונית Elements, לוחצים על התג view-source לצד התג <html>.
3. בודקים את מקור הדף בחלונית מקורות.

תצוגת רשת

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

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

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

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

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

רשת משנה

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

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

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

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

שרירים של סלע

רכיב HTML הוא קונטיינר גמיש אם מאפיין ה-CSS שלו display מוגדר לערך flex או inline-flex. לרכיבים כאלה יש תגים של flex לידם, שמאפשרים להחליף בין שכבות-העל המתאימות.

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

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

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

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

מודעה

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

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

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

אי אפשר ללחוץ על התג ad, אבל אם מעבירים מעליו את העכבר, מופיע הסבר קצר שמספק הקשר לגבי הסיבה לכך שהרכיב זוהה כמודעה, למשל:

• שושלת הסקריפטים: אילו סקריפטים היו מעורבים ביצירת הרכיב.
• כללים של רשימת מסננים: הכלל הספציפי מרשימת מסננים (לדוגמה, EasyList) שתאם לרכיב או למשאב שהוא טען.

אפשר גם להשתמש בכרטיסייה Rendering כדי להדגיש מסגרות של מודעות באדום.

גלילה

רכיב HTML הוא מאגר גלילה אם מאפיין ה-CSS‏ overflow שלו מוגדר לערך scroll או auto, כשיש מספיק תוכן שגורם להצפה. לצד רכיבים כאלה מופיעים תגים scroll.

גלילה עם נקודות עצירה (scroll snapping)

למאגרי גלילה יכולים להיות מאפייני CSS שמגדירים נקודות הצמדה. ליד רכיבים כאלה מופיעים תגים scroll-snap שאפשר ללחוץ עליהם כדי להפעיל או להשבית את שכבות העל המתאימות.

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

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

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

מאגר

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

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

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

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

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

משבצת

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

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

1. בודקים את הרכיב בתצוגה המקדימה.
2. בעץ ה-DOM, לוחצים על התג ink_selectionslot לצד הרכיב כדי לאתר את משבצת המיקום התואמת.
3. כדי לחזור לתוכן של המשבצת, לוחצים על התג ink_selectionreveal.

שכבה עליונה

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

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

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

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

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

מדיה

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

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

חלון קופץ

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

התג הזה מחליף את התג top-layer שלצידו, שמקשר לרכיבים התואמים במאגר #top-layer.

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

1. בתצוגה המקדימה, לוחצים על TOGGLE POPOVER.
2. בודקים את החלון הקופץ שמופיע.

3. בעץ ה-DOM, לוחצים על התג popover לצד הרכיב <div popover>. בחלונית Elements מוצג התג top-layer.

   

4. פועלים לפי השלבים בקטע שכבה עליונה.

מידע נוסף זמין גם בכתובת https://web.dev/learn/css/popover-and-dialog.

סגנון התחלתי

הכלל @starting-style מגדיר את הסגנונות הראשוניים של רכיב לפני שהוא מוצג בדף. המאפיין הזה נדרש לרכיבים שמונפשים פנימה מ-display: none, כי הם צריכים מצב שממנו הם יונפשו פנימה. לצד רכיבים כאלה מופיעים תגים של starting-style.

התג הזה מחליף את הסגנונות בכלל @starting-style, כדי שתוכלו לראות את האנימציה בפעולה.

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

1. בתצוגה המקדימה, לוחצים על פתיחת חלון קופץ.
2. בודקים את ה-popover שמופיע.

3. בעץ ה-DOM, מחליפים את התג starting-style לצד הרכיב <div popover>.

   

4. צופים באנימציה בפעולה ובסגנונות שמוחלים בכרטיסייה רכיבים > סגנונות.

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

Custom-element

רכיבי HTML בהתאמה אישית שמזוהים לפי שמות תגים עם מקפים או מאפייני is="..." של רכיבים מוכללים בהתאמה אישית, מוצגים עם תגי custom-element לידם בעץ ה-DOM.

לוחצים על התג כדי לעבור לקוד הרלוונטי בחלונית מקורות.