Traccia elemento attivo

Kayce Basques
Kayce Basques
Alexandra Klepper
Alexandra Klepper

Supponiamo che tu stia testando l'accessibilità alla navigazione da tastiera di una pagina. Quando navighi nella pagina con il tasto Tab, l'anello di stato attivo a volte scompare perché l'elemento con stato attivo è nascosto. Per monitorare l'elemento con stato attivo in DevTools:

  1. Apri la Console.
  2. Fai clic su Crea espressione live.

    Creare un'espressione in tempo reale.

    Scopri di più in Monitorare i valori JavaScript in tempo reale con le espressioni live.

  3. Digita document.activeElement.

  4. Fai clic all'esterno dell'interfaccia Espressione live per salvare.

Il valore dopo document.activeElement è il risultato dell'espressione. Poiché questa espressione rappresenta sempre l'elemento con stato attivo, puoi tenere traccia dell'elemento con stato attivo.

  • Passa il mouse sopra il risultato per evidenziare l'elemento con stato attivo nella finestra.
  • Fai clic con il tasto destro del mouse sul risultato e seleziona Apri nel riquadro Elementi per mostrare l'elemento nell'albero DOM nel riquadro Elementi.
  • Fai clic con il tasto destro del mouse sul risultato e seleziona Memorizza come variabile globale per creare un riferimento di variabile al nodo che puoi utilizzare nella Console.