Acompanhar elemento em foco

Kayce Basques
Kayce Basques

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 que tem foco está oculto. Para rastrear o elemento em foco no DevTools:

  1. Abra o Console.
  2. Clique em Criar expressão ao vivo Criar expressão em tempo real.

    Criação de uma expressão em tempo real.

    Para mais informações, consulte Observar valores de JavaScript em tempo real com as expressões ao vivo.

  3. Digite document.activeElement.

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

O valor 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 tem o 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 "Elements" para mostrar o elemento na árvore DOM no painel Elements.
  • Clique com o botão direito do mouse no resultado e selecione Store as global variable para criar uma referência de variável ao nó que pode ser usado no Console.