Acompanhar elemento em foco

Kayce Basques

Alexandra Klepper

Suponha que você esteja testando a acessibilidade de navegação por teclado de uma página. Ao navegar pela página com a tecla Tab, o anel de foco às vezes desaparece porque o elemento com foco está oculto. Para rastrear o elemento em foco no DevTools:

1. Abra o console.

2. Clique em Criar expressão dinâmica.

   

   Saiba mais em Acompanhar valores de JavaScript em tempo real com expressões dinâmicas.

3. Digite document.activeElement.

4. Clique fora da interface Expressão ao vivo para salvar.

O valor depois de document.activeElement é o resultado da expressão. Como essa expressão sempre representa o elemento em foco, você pode acompanhar qual elemento está em foco.

• Passe o cursor sobre o resultado para destacar o elemento em foco na janela de visualização.
• Clique com o botão direito do mouse no resultado e selecione Abrir no painel Elementos para mostrar o elemento na árvore DOM no painel Elementos.
• Clique com o botão direito do mouse no resultado e selecione Armazenar como variável global para criar uma referência de variável ao nó que pode ser usada no Console.