Congelar tela no painel do depurador chrome / DevTools para inspeção de popover?

394

Estou usando o inspetor chrome para tentar analisar o z-indexpopover de uma inicialização do twitter e achar isso extremamente frustrante ...

Existe uma maneira de congelar o popover (enquanto mostrado) para que eu possa avaliar e modificar o CSS associado?

A colocação de um 'foco' fixo no link associado não faz com que o popover apareça.

css google-chrome google-chrome-devtools Abram
fonte
7
Tente definir um ponto de interrupção em sua JavaScript imediatamente após a pop-up é mostrado ( debugger;)
Hope4You
5
Eu uso window.setTimeoutpara disparar debuggerem 5 segundos, então passe o mouse sobre o elemento e aguarde.
grimmdude
Olá, redator técnico do DevTools aqui. Vocês podem me enviar MVCEs demonstrando o problema? A partir de 2019, temos algumas ferramentas que devem funcionar ( pontos de interrupção do ouvinte de eventos , alternância de pseudo-classe ), mas não posso fornecer uma resposta detalhada até que eu possa reproduzir sua situação.
Kayce Basques
Você pode encontrar outra solução aqui para Chrome e Firefox
Muhammed AbdElFatah 02/10/19
@KayceBasques Aqui está um exemplo: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Clique na lista suspensa para abri-la e tente inspecionar o popover de conteúdo da lista na visualização Elementos.
RMorrisey 26/03

Respostas:

704

Tenho que trabalhar. Aqui estava o meu procedimento:

  1. Navegue até a página desejada
  2. Abra o console do desenvolvedor - F12no Windows / Linux ou option+ ⌘+J no macOS
  3. Selecione os Sources guia no inspetor chrome
  4. Na janela do navegador, passe o mouse sobre o elemento desejado para iniciar o popover
  5. Clique F8no Windows / Linux (ou fn+ F8no macOS) enquanto a popover estiver sendo exibida. Se você clicou em qualquer lugar da página real, F8 não fará nada. Seu último clique precisa estar em algum lugar no inspetor, como a guia "Fontes"
  6. Vá para a Elementsguia no inspetor
  7. Encontre seu popover (ele será aninhado no HTML do elemento acionador)
  8. Divirta-se modificando o CSS
Abram
fonte
9
Esse fluxo de trabalho me deu uma introdução curta e útil ao depurador do ponto de interrupção e ajudou a isolar um menu difícil de estilizar, pois desapareceu no clique do console.
Trevor Pierce
22
Se o elemento DOM usa o evento focusout para ocultar, você não tem chance de pressionar F8!
Marcel
2
@ Dean para acionar o F8 que você precisa usar fn!
Mk01aj 25/08
10
Para obter mais informações, o que o F8atalho faz é pausar o depurador (execução de script). E ctrl + \ também funciona. ( cmd + \ no MacOS).
LeOn - Han Li
11
Ou você pode pressionar F8duas vezes
samdd 24/06
274

Para poder inspecionar qualquer elemento, faça o seguinte. Isso deve funcionar mesmo que seja difícil duplicar o estado de foco:

  • Execute o seguinte javascript no console. Isso entrará no depurador em 5 segundos.

    setTimeout(function(){debugger;}, 5000)

  • Vá mostrar seu elemento (passando o mouse ou no entanto) e aguarde até que o Chrome entre no depurador.

  • Agora clique no Elements guia no Chrome Inspector e você pode procurar seu elemento lá.
  • Você também pode clicar no Find Elementícone (parece uma lupa) e o Chrome permite que você vá e inspecione e encontre seu elemento na página clicando com o botão direito do mouse e escolhendoInspect Element

Observe que essa abordagem é uma pequena variação dessa outra ótima resposta nesta página.

Brad Parks
fonte
7
Respeito que você tenha prestado o devido respeito à resposta de frzsombor. agradável.
Jeremy Moritz
4
Era disso que eu precisava, pois a funcionalidade era devido a um elemento DOM ser adicionado ao js Focus e removido no blur, o que sempre acontece quando você muda para as ferramentas de desenvolvimento.
trudesign
6
A solução F8 da Abram não funcionou para mim. Este fez. Obrigado!
21816 Ralf
3
Valeu. Fiz um marcador com título : ❚❚, endereço : javascript:debugger;. F8funciona, mas para aqueles que preferem usar o mouse, isso pode ser mais conveniente.
Tymek
11
Como outros comentaram, a resposta F8 não estava funcionando para mim e estava me deixando completamente louca! Isso funciona como um encanto. Obrigado!
DoYouEvenCodeBro 08/08/19
70

ATUALIZAÇÃO: Como Brad Parks escreveu em seu comentário, há uma solução muito melhor e mais fácil com apenas uma linha de código JS:

execute setTimeout(function(){debugger;},5000);, então mostre seu elemento e aguarde até que ele entre no Debugger

Resposta original:

Acabei de ter o mesmo problema e acho que encontrei uma solução "universal". (supondo que o site use jQuery)
Espero que ajude alguém!

  1. Vá para a guia Elementos no inspetor
  2. Clique com o botão direito <body>e clique em " Editar como HTML "
  3. Adicione o seguinte elemento depois <body>pressione Ctrl + Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. Clique com o botão direito neste novo elemento e selecione "Interromper em ..." -> "Modificações de atributos"
  5. Agora vá para a visualização Console e execute o seguinte comando:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Agora volte para a janela do navegador e você terá 5 segundos para encontrar seu elemento e clique em / hover / focus / etc, antes que o ponto de interrupção seja atingido e o navegador "congele".
  7. Agora você pode inspecionar seu elemento clicado / pairado / focado / etc em paz.

É claro que você pode modificar o javascript e o tempo, se você entender.

frzsombor
fonte
11
Ei! Ótima idéia ... você nem precisa adicionar a div extra ... Basta executar esse javascript setTimeout(function(){debugger;}, 5000);, exibir o seu elemento e aguardar até que ele entre no depurador. Em seguida, clique na guia "Elementos" no Inspetor do Chrome e você poderá procurar seu elemento lá. Você também pode clicar no ícone "Encontrar elemento" (parece uma lupa) e o Chrome permitirá que você inspecione e encontre seu elemento na página clicando com o botão direito do mouse e escolhendo "Inspecionar elemento".
Brad Parks
5
Eu acho que você deve adicionar isso como resposta, porque esta solução não é apenas melhor que a minha, mas melhor do que todas as outras aqui. Muito bom!
Frzsombor
38
  1. Clique com o botão direito do mouse em qualquer lugar dentro da guia Elementos
  2. Escolher Breakon... > subtree modifications
  3. Ative o pop-up que você deseja ver e ele congelará se houver alterações no DOM
  4. Se você ainda não vir o pop-up, clique no Step over the next function(F10)botão ao lado Resume(F8)no centro superior superior do chrome até congelar o pop-up que deseja ver.
Adrian Enriquez
fonte
3
OBRIGADO! Eu não conhecia este e está me salvando
R Claven 6/18
14

Descobri que isso funciona muito bem no Chrome.

Clique com o botão direito do mouse no elemento que você deseja inspecionar e clique em Force Element State> Hover. Captura de tela anexada.

Estado do elemento de força

Leah Huyghe
fonte
5
Funcionará apenas se o popover for acionado por css.
Mk01aj 25/08
6

Coloque isso na guia console:

setTimeout(function(){debugger;}, 5000)

Em seguida, clique em onde mostrar o pop-up, 5s depois - a tela será congelada e se divertirá personalizando o CSS.

Parker Lucenzo
fonte
0

Meu jeito simples:

setTimeout(function(){ debugger; }, 3000);
Nadav B
fonte
7
Isso é exatamente o mesmo que a solução de Brad Parks publicada há 3 anos
frzsombor 28/02/19
-2

Eu tentei as outras soluções aqui, elas funcionam, mas eu sou preguiçoso, então esta é a minha solução

  1. passe o mouse sobre o elemento para acionar o estado expandido
  2. ctrl+ shift+c
  3. passe o mouse sobre o elemento novamente
  4. clique direito
  5. navegue até o depurador

ao clicar com o botão direito do mouse, ele não registra mais o evento do mouse, pois um menu de contexto é exibido, para que você possa mover o mouse com segurança

Vincent Tang
fonte