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

Dale St. Marthe

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

סקירה כללית

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

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

• סגנונות:

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

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

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

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

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

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

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

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

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

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

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