סקירה כללית של חלונית הרכיבים

Dale St. Marthe

אפשר להשתמש בחלונית Elements כדי לבדוק ולערוך רכיבי DOM.

סקירה כללית

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

בחלונית Elements יש גם את הכרטיסיות הבאות שמכילות כלים רלוונטיים:

• סגנונות:

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

• מחושב: רשימה של מאפיינים שנפתרו שחלים על רכיב מסוים בזמן העיבוד שלהם על ידי Chrome.

• פריסה: מכיל אפשרויות לשינוי שכבות-על של רשת ושל flexbox.

• פונקציות event listener: רשימה של כל הפונקציות event listener והמאפיינים שלהן. אפשר למצוא את המקור של פונקציות event listener ולסנן לפי פונקציות event listener פסיביות או חוסמות.

• נקודות עצירה של DOM: מציגות רשימה של נקודות עצירה של שינויים ב-DOM שנוספו מחלונית הרכיבים ומאפשרות להפעיל, להשבית, להסיר או לחשוף אותן.

• מאפיינים: בוחרים בצומת DOM כדי לבדוק ולמיין את המאפיינים של האובייקט שנוצרו או הועברו בירושה.

• נגישות: רשימת רכיבים עם תוויות ARIA והמאפיינים שלהם. מאפשר להחליף את המצב של עץ הנגישות ולבדוק אותו (ניסיוני).

פתיחת החלונית 'רכיבים'

כברירת מחדל, כשפותחים את כלי הפיתוח, החלונית Elements (רכיבים) נפתחת. אפשר גם לבחון צומת בכל מקום בדף כדי לפתוח אוטומטית את החלונית Elements.

כדי לפתוח ידנית את החלונית Elements (רכיבים):

1. פותחים את כלי הפיתוח.
2. פותחים את תפריט הפקודות על ידי לחיצה על:
   • ‫macOS: ‏ Command+Shift+P
   • ‫Windows, ‏ Linux, ‏ ChromeOS: ‏ Control+Shift+P
3. מתחילים להקליד Elements, בוחרים באפשרות הצגת רכיבים ומקישים על Enter. החלונית Elements מוצגת בDrawer בתחתית חלון כלי הפיתוח.