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

Dale St. Marthe

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

סקירה

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

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

• סגנונות:

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

• מחושב: הצגת רשימה של נכסים שטופלו והוחלה על רכיב כפי שהם מעובדים על ידי Chrome.

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

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

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

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

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

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

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

כדי לפתוח באופן ידני את החלונית Elements:

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