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 dello stato attivo scompare perché l'elemento attivo è nascosto. Per monitorare l'elemento attivo in DevTools:
- Apri la console.
Fai clic su Crea espressione dal vivo
.
Per ulteriori informazioni, consulta la sezione Visualizzazione dei valori JavaScript in tempo reale con le espressioni live.
Digita
document.activeElement.Per salvare, fai clic all'esterno dell'interfaccia utente di Espressione dal vivo.
Il valore visualizzato sotto document.activeElement è il risultato dell'espressione. Poiché l'espressione rappresenta sempre l'elemento attivo, ora hai un modo per tenere sempre traccia dell'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 variabile al nodo che puoi utilizzare nella console.