Como inspecionar o elemento html que desaparece do DOM com o foco perdido?

Estou tentando inspecionar propriedades CSS de uma entrada em uma célula da tabela. A entrada aparece no clique e desaparece com o foco perdido, como quando tento inspecioná-la. Como posso fazer isso para não perder o foco enquanto mudo para outra janela (o inspetor)?

No navegador Chrome, abra as Ferramentas do desenvolvedor, selecione a guia Elementos e abra o menu contextual do nó pai do elemento que você deseja inspecionar. No menu contextual, clique em Quebrar em > Modificações de subárvore .

Depois, basta clicar na página e entrar no inspetor sem perder o foco ou perder o elemento que deseja inspecionar.

Você pode capturar o elemento que desaparece se você pausar a execução do JavaScript com um atalho de teclado sem mover o mouse. Veja como você faz isso no Chrome:

1. Abra as Ferramentas do desenvolvedor e vá para Fontes.

2. Observe o atalho para pausar a execução do script— F8.

   

3. Interaja com a interface do usuário para que o elemento apareça.

4. Hit F8.
5. Como você pode mover o mouse, inspecione o DOM, qualquer que seja. O elemento ficará lá.

Esse truque também funciona no Firefox e em outros navegadores modernos.

Se tudo mais falhar, digite isso no console:

setTimeout(() => { debugger; }, 5000)

Então você tem 5 segundos (ou altere o valor para qualquer outra coisa) para fazer com que o que você deseja depurar apareça.

Nenhuma das outras respostas funcionou para mim - a árvore do DOM continuava sendo modificada (ou seja, as coisas com as quais me preocupo desapareciam) logo antes do script fazer uma pausa.

Não tenho certeza se isso funciona na sua situação, mas normalmente (e, em todos os casos, vale a pena mencionar a esse respeito, pois é uma ótima ferramenta) nas Ferramentas para Desenvolvedor do Chrome, você pode simular estados de elementos e um também :focus.

Para fazer isso, vá para a Elementsguia nas Ferramentas do desenvolvedor e verifique se você está na Stylesseção à direita (esse deve ser o local padrão quando você inicia as Ferramentas do desenvolvedor). Agora, apenas com os estilos no canto superior direito, você tem um ícone Toggle Element State. Quando você clicar nele você pode simular :active, :hover, :focuse :visitedpara o elemento selecionado na esquerda, na sua opinião código.

No Chrome, na página de ferramentas do desenvolvedor da página em teste ... clique no menu de opções e abra as configurações de preferências ... em DevTools, ative 'Emular uma página focada'

Em seguida, na página de teste, faça com que os elementos apareçam. Isso funcionou para manter meus resultados de pesquisa pop-up focados em permanecer na tela para que eu pudesse trabalhar com ele.

Não é uma solução real, mas geralmente funciona (:

1. Focar o elemento
2. Clique com o botão direito do mouse no menu de contexto
3. Mover para ferramentas do desenvolvedor

Eu tive uma situação muito difícil e nenhuma resposta estava funcionando daqui (não verifiquei as respostas alterando o contêiner, que é o corpo para mim ou o evento original, porque não sei disso). Finalmente, encontrei uma solução alternativa ao interromper os pontos de interrupção do Control Event Listener no Chrome Inspector. Talvez essa seja também uma maneira de quebrar o navegador para situações complicadas em que mesmo o F8 ou o botão direito do mouse oculta o pop-up novamente:

Cole o seguinte Javascript no console do desenvolvedor do navegador:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

Eu tenho uma correção mais rápida, pois não sou muito bom em usar ferramentas, eis o que faço.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Se você abrir o Chrome DevTools e acionar o inspetor de elementos usando atalhos de teclado, ele deverá resolver o problema.

Mac: Cmd+Opt+J e depoisCmd+Opt+C

Windows: Ctrl+Shift+J e depoisCtrl+Shift+C

[