הפנייה לתגים

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

תצוגת רשת

רכיב 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 שלצד הרכיב ובודקים את שכבת-העל.

שכבת-על של Flex.

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

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

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

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

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

תג מודעה.

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

גלילה

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

גוללים על תג בצומת של עץ DOM.

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

ניתן להוסיף לקונטיינרים של גלילה מאפייני 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 לצד הרכיב כדי לאתר את החריץ התואם. מיקום וחשיפת תגים.
  3. כדי לחזור לתוכן של מיקום המודעה, אפשר ללחוץ על התג reveal.

שכבה עליונה

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

כדי לעזור לכם להציג רכיבים של השכבה העליונה באופן חזותי, בחלונית Elements (רכיבים) מתווסף מאגר #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>. לוחצים על התג הזה כדי לפתוח את החלונית מדיה ולפתור באגים בקוד של המדיה.

תג המדיה מופעל בהגדרות התגים ומוצג לצד רכיב הסרטון.

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