הפנייה לתגים

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

תפריט 'הגדרות התגים'.

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

הצגת המקור

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

התג &#39;הצגת המקור&#39;.

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

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

תצוגת רשת

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

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

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

שכבת-על של רשת.

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

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

Subgrid

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

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

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

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

תג לסימון מודעות.

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

גלילה

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

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

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

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

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

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

חלון קופץ

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

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

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

  1. בתצוגה המקדימה, לוחצים על החלפת מצב של חלון קופץ.
  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. בודקים את החלון הקופץ שמופיע.

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

    התג של סגנון ההתחלה לצד הרכיב עם הכלל ‎ @starting-style.

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

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