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

Dale St. Marthe

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

סקירה כללית

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

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

• עיצובים:

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

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

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

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

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

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

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

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

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

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

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