Acompanhar elemento em foco

Kayce Basques

Twitter GitHub Glitch

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

1. Abra o Console.

2. Clique em Create Live Expression .

   

   Para mais informações, consulte Acompanhar valores de JavaScript em tempo real com Expressões ao vivo.

3. Digite document.activeElement.

4. Clique fora da IU da Live Expression para salvar.

O valor que você vê abaixo de document.activeElement é o resultado da expressão. Como essa expressão sempre representa o elemento em foco, agora é possível monitorar 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 Revelar 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 você pode usar no Console.