Acompanhar elemento em foco

Kayce Basques

Suponha que você esteja testando a acessibilidade da 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 com foco está oculto. Para rastrear o elemento em foco no DevTools:

1. Abra o console.

2. Clique em Create Live Expression .

   

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

3. Digite document.activeElement.

4. Clique fora da interface do Live Expression para salvar.

O valor mostrado abaixo de document.activeElement é o resultado da expressão. Como essa expressão sempre representa o elemento em foco, agora você tem uma maneira de sempre 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 Reveal in Elements panel para mostrar o elemento na Árvore DOM no painel Elementos.
• Clique com o botão direito do mouse no resultado e selecione Store as global variables para criar uma referência de variável ao nó que pode ser usada no Console.