מעקב אחר מיקוד

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

  1. פותחים את המסוף.
  2. לוחצים על Create Live Expression יצירת ביטוי בזמן אמת.

    יצירת ביטוי בזמן אמת.

    מידע נוסף זמין במאמר צפייה בערכים של JavaScript בזמן אמת באמצעות Live Expressions.

  3. מקלידים document.activeElement.

  4. לוחצים מחוץ לממשק המשתמש של Live Expression כדי לשמור.

הערך שמופיע מתחת ל-document.activeElement הוא תוצאת הביטוי. מכיוון שהביטוי הזה תמיד מייצג את הרכיב שממוקד, עכשיו יש לכם דרך לעקוב תמיד אחרי הרכיב שממוקד.

  • מעבירים את העכבר מעל התוצאה כדי להדגיש את האלמנט שבמוקד באזור התצוגה.
  • לוחצים לחיצה ימנית על התוצאה ובוחרים באפשרות הצגה בחלונית 'רכיבים' כדי להציג את המרכיב בעץ ה-DOM בחלונית רכיבים.
  • לוחצים לחיצה ימנית על התוצאה ובוחרים באפשרות Store as global variable כדי ליצור הפניה למשתנה של הצומת, שאפשר להשתמש בה במסוף.