Como inspecionar o elemento que desaparece em um navegador?

152

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

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.

lukas.pukenis
fonte
2
Sua pergunta ajudou, embora eu não tenha document.body.addEventListener('mouseup',function(){ debugger; })entrado no ponto de interrupção usando as fontes, executei o seguinte script no console: Isso causou uma pausa e eu pude inspecionar os elementos criados.
HMR
Você é demais. Tive esse problema exato com um controle React-Select, no qual não era possível exibir o HTML dos itens da lista porque a subárvore era excluída a qualquer momento em que eu clicava. Necessário o ID do item para automatizar os cliques usando o Selenium. Obrigado!
Araisbec

Respostas:

177

(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.

insira a descrição da imagem aqui

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 :

insira a descrição da imagem aqui

arxpoetica
fonte
1
Para evitar possíveis confusões - o depurador fará uma pausa enquanto você aciona o evento, também conhecido como digitando o nome de um local. Quando a tela parar, basta pressionar o botão play no próprio DOM e você poderá acionar o evento.
Dylan Pierce
Isso não funciona se a página capturou o botão direito e faz suas próprias coisas com o botão direito.
Michael
Isso não funciona na primeira das duas caixas de diálogo no mesmo contêiner
Still_learning
@Still_learning Você pode explicar o que quer dizer com "duas caixas de diálogo no mesmo contêiner".
arxpoetica 14/02
<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container>- no meu caso, a primeira caixa de diálogo é exibida apenas até que os dados cheguem do banco de dados, aproximadamente 1 segundo
Still_learning
92

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.
Joseph Tinoco
fonte
3
Perfeito!! Isto faz exatamente o que eu queria
Daniel Loiterton
2
Percebi que isso só funciona quando você já possui as ferramentas do desenvolvedor abertas na guia "Fontes".
hbulens 01/03
3
congela o código da execução, mas o elemento ainda desapareceu (estou usando o React).
Lorem Ipsum Dolor
Meu Chrome diz F8 ou Crtl + \ (não Crtl + /). Além disso, o Crtl + \ não funciona no meu caso ...
Roger Veciana
Isso não funciona nos pop-ups de controle de vídeo do Google ... o controle parece desaparecer de vista assim que você pressiona a tecla e desapareceu completamente antes que o congelamento ocorra.
Michael
18
  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.

Mojtaba
fonte
1
Esta é a maneira mais rápida e estável de depurar elementos que desaparecem ^
warmwhisky
8

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.
Mamba negra
fonte
1
Obrigado, obrigado pelas instruções detalhadas! Depois de uma demonstração de extrema destreza - clicar em um botão, pressionar Ctr + Shift + C, mover o mouse para passar o mouse sobre o elemento e pressionar F8no espaço de um segundo e meio - eu finalmente consegui meu elemento no modo
inspecionável
2

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

Sebastian Zartner
fonte
O Chrome também tem um inspetor decente. O problema é - clicar com o botão direito do mouse no elemento faz desaparecer no meu caso. O Chrome também possui a opção Break on DOM. O problema com isso - eu não sei qual elemento é como ele é gerado dinamicamente
lukas.pukenis
1
Acabei de editar minha resposta para dar uma dica de como saber qual elemento é.
Sebastian Zartner
2

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 : insira a descrição da imagem aqui
  5. Podemos ver todos os elementos lá

Aqui está uma demonstração:

insira a descrição da imagem aqui

Raja David
fonte
2

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.

Vivekanand Panda
fonte
0

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.

Matpol
fonte
1
Sim. Tenho afirmado que as mudanças acontecem muito rápido no DOM e modifica página Dom fortemente por isso não é realmente uma solução, como eu não sou capaz distinguir meus elementos necessários de um grupo de modificações em todos os lugares :)
lukas.pukenis
você pode tentar rastrear o que está acontecendo usando o console.log, por exemplo, no início da função que está tentando verificar, pode visualizar o objeto css etc. Ou desacelerar as alterações até saber que elas funcionam corretamente e alterar a velocidade para o que você deseja. quer que seja por exemplo, esconder ( 'lento') em jquery
matpol
O problema é - não é minha própria base de código, é um legado, grande, velho, base de código, onde simples pesquisa pelos arquivos me dá nada .. :)
lukas.pukenis
você também pode ver quais arquivos estão sendo usados ​​pela página no inspetor. Gostaria de removê-los até quebrar, depois procurar no arquivo que o quebrou e partir daí. Você também pode procurar os arquivos reais também.
matpol
2
Como sobre isso: stackoverflow.com/questions/10213703/…
matpol 18/06
0

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

Hani Yassine
fonte