Como inspecionar o elemento que desaparece em um navegador?

Como posso inspecionar um elemento que desaparece quando o mouse se afasta?

Não sei se é identidade, classe ou qualquer coisa, mas quero inspecionar.

Soluções que tentei:

Execute o seletor jQuery no console, $('*:contains("some text")')mas não teve sorte, principalmente porque o elemento não está oculto, mas provavelmente removido da árvore DOM.

A inspeção manual da árvore do DOM em busca de alterações não me fornece nada, pois parece ser muito rápido para perceber o que mudou.

SUCESSO:

Eu fui bem-sucedido com os pontos de interrupção do evento. Especificamente - mousedown no meu caso. Basta ir Sources-> Event Listener Breakpoints-> Mouse-> mousedownno Chrome. Depois disso, cliquei no elemento que queria inspecionar e, por dentro Scope Variables, vi algumas orientações úteis.

(Esta resposta se aplica apenas às Ferramentas do desenvolvedor do Chrome. Consulte a atualização abaixo.)

Encontre um elemento que contenha o elemento que desaparece. Clique com o botão direito do mouse no elemento e aplique "Break on ...> Subtree Modifications". Isso lançará uma pausa no depurador antes que o elemento desapareça, o que permitirá que você interaja com o elemento em um estado de pausa.

Atualização 22 de outubro de 2019: com o lançamento do v. 70, parece que o FireFox finalmente suporta esse tipo de depuração 2 3 :

Um método alternativo no Chrome:

• Abra o devTools (F12).
• Selecione a guia "Fontes".
• Enquanto o elemento desejado é exibido, pressione F8 (ou Ctrl + /). Isso interromperá a execução do script e "congelará" o DOM exatamente como ele é exibido.
• A partir deste ponto, use Ctrl + Shift + C para selecionar o elemento.

1. Console aberto
2. Digitar setTimeout(()=>{debugger;},5000);
3. pressione Enter

Agora você tem 5 segundos para fazer seu elemento aparecer. Depois que ele aparecer, aguarde até o depurador chegar. Contanto que você não continue, você pode brincar com seu elemento e ele não desaparecerá.

Dica útil para evitar repetir as etapas acima sempre:

adicione isso como um bookmarklet:

1. Marque uma página como favorita
2. Edite este novo marcador
3. Substitua o URL / local por: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Na próxima vez que você desejar usar isso, basta clicar / tocar neste marcador.

Estou usando o chrome no Mac. Segui as etapas acima, mas tentarei explicar um pouco mais:

1. Clique com o botão direito e vá para inspecionar o elemento.
2. Vá para a guia fontes.
3. Em seguida, passe o mouse sobre o elemento
4. Em seguida, usando o teclado F8 ou Command(Window) \ . Pausará a tela em um estado estático e o elemento não desaparecerá ao passar o mouse.

No Firebug, existem soluções diferentes para isso:

1. Você pode usar Break On Mutate dentro do painel HTML. (com isso, você também poderá descobrir qual elemento é)
2. Você pode clicar com o botão direito do mouse no elemento e escolher Inspecionar elemento com Firebug

Você também pode seguir o problema 551 , que solicita uma maneira de bloquear temporariamente eventos específicos.

Editar:

Para descobrir qual elemento é, também é possível ativar as opções do painel HTML Realçar alterações , Expandir alterações e Rolar alterações na exibição para tornar o elemento visível dentro do painel HTML.

Sebastian

No meu caso, usei a opção Expandir recursivamente no google chrome:

Os passos são:

1. Inspecione o campo suspenso
2. Encontre o DOM dinâmico (o destaque roxo)
3. Clique com o botão direito do mouse no DOM dinâmico
4. Escolha Expandir recursivamente :
5. Podemos ver todos os elementos lá

Aqui está uma demonstração:

Passe o mouse sobre o elemento com o mouse e pressione F8 (no Chrome) para pausar a execução do script. O estado de pairar permanecerá visível para você.

Leva você para a guia fontes. Volte para a guia Elementos. Este código de tempo não irá desaparecer.

você pode ver os elementos que aparecem e desaparecem no inspetor em elementos. Se você navegar para o elemento quando estiver visível, poderá vê-lo desaparecer ou seu css mudar quando o status for alterado.

Isso é possível com o firebug no firefox ou o inspetor incorporado no chrome.

eu tive o mesmo problema, mas eu uso o Firefox, ele desaparece assim que eu abro o elemento inspecionado, encontrei uma solução: abra os 4 traços (configurações), vá para desenvolvedor da web> Depurador e pressione imediatamente F8, que é o atalho para a pausa que interrompe o script antes de chutar e detectar que você abriu as ferramentas dos desenvolvedores