Supponiamo che tu stia testando l'accessibilità della navigazione da tastiera di una pagina. Quando navighi nella pagina con il tasto Tab, a volte l'anello di messa a fuoco scompare perché l'elemento impostato è nascosto. Per monitorare l'elemento attivo in DevTools:
- Apri la console.
Fai clic su Crea espressione dal vivo
.
Per ulteriori informazioni, consulta la sezione Visualizzare i valori di JavaScript in tempo reale con le espressioni dal vivo.
Digita
document.activeElement.Fai clic all'esterno dell'interfaccia utente di Espressione dal vivo per salvare.
Il valore visualizzato sotto document.activeElement è il risultato dell'espressione. Poiché quell'espressione rappresenta sempre l'elemento attivo, ora hai un modo per tenere sempre traccia di quale elemento è attivo.
- Passa il mouse sopra il risultato per evidenziare l'elemento attivo nell'area visibile.
- Fai clic con il tasto destro del mouse sul risultato e seleziona Mostra nel riquadro Elementi per mostrare l'elemento nell'albero DOM nel riquadro Elementi.
- Fai clic con il pulsante destro del mouse sul risultato e seleziona Archivia come variabile globale per creare un riferimento di variabile al nodo da utilizzare nella console.