הפנייה לתגים

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

  1. פותחים את כלי הפיתוח.
  2. לוחצים לחיצה ימנית על רכיב בעץ ה-DOM ובוחרים באפשרות הגדרות תג…. הגדרות תגים.
  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.

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

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

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

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

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