נניח שאתם בודקים את הנגישות של ניווט במקלדת בדף מסוים. כשמנווטים בדף באמצעות המקש Tab, לפעמים טבעת המיקוד נעלמת כי האלמנט שמוקף בה מוסתר. כדי לעקוב אחרי האלמנט הממוקד ב-DevTools:
- פותחים את המסוף.
לוחצים על Create Live Expression .
מידע נוסף זמין במאמר צפייה בערכים של JavaScript בזמן אמת באמצעות Live Expressions.
מקלידים
document.activeElement
.לוחצים מחוץ לממשק המשתמש של Live Expression כדי לשמור.
הערך שמופיע מתחת ל-document.activeElement
הוא תוצאת הביטוי. מכיוון שהביטוי הזה תמיד מייצג את הרכיב שממוקד, עכשיו יש לכם דרך לעקוב תמיד אחרי הרכיב שממוקד.
- מעבירים את העכבר מעל התוצאה כדי להדגיש את האלמנט שבמוקד באזור התצוגה.
- לוחצים לחיצה ימנית על התוצאה ובוחרים באפשרות הצגה בחלונית 'רכיבים' כדי להציג את המרכיב בעץ ה-DOM בחלונית רכיבים.
- לוחצים לחיצה ימנית על התוצאה ובוחרים באפשרות Store as global variable כדי ליצור הפניה למשתנה של הצומת, שאפשר להשתמש בה במסוף.