“Inspecionar” um elemento flutuante?

Nota: Eu li tópicos semelhantes, mas nenhum é exatamente meu - posso clicar com o botão direito do mouse e ele desaparece.

Acho "Inspecionar Elemento" uma ferramenta inestimável no Chrome, no entanto, minha última incursão ao aprender as maneiras mágicas que muitos de vocês já possuem me viram criando um submenu para um elemento na minha barra de navegação, que aparece abaixo ao passar o mouse sobre ele item pai.

O pop-up (ou para baixo) não tem o estilo que eu gostaria, então clico com o botão direito do mouse> inspecionar elemento para ver o que está vindo de onde exatamente e tenho uma ideia melhor de como alcançar o efeito desejado.

No entanto, assim que eu afasto meu mouse do menu, ele desaparece.

Portanto, não posso selecionar diferentes elementos no painel de inspeção e ver qual área está destacada ao mesmo tempo.

Existe uma maneira de contornar isso, sem alterar o menu para que ele permaneça "pop up" depois de ativado?

Se o hoverefeito for dado com CSSentão sim, normalmente uso duas opções para conseguir isso:

Um, para seeo hover effectquando o mouse deixar o hover area:
Abra o inspetor na janela encaixado e aumentar a largura até que alcance o seu HTML element, em seguida, clique direito e no menu pop-up deve estar sobre a zona inspetor ... então quando você move o mouse sobre o ponto de vista fiscal , a hover effectmanter ativada no documento.

Dois, para keepo hover effectmesmo que o mouse não esteja sobre o HTML element, abra o inspetor, vá para Styles TABe clique no ícone superior direito que diz Toggle Element State... (retângulo pontilhado com uma seta) Lá você pode ativar manualmente o Hover Event(entre outros) com o caixa de seleção fornecida.

Se não estiver claro, me avise e posso adicionar algumas capturas de tela. Editado : captura de tela adicionada.

E finalmente e como disse no início, só poderei fazer isso se o hoverestiver definido com CSS:HOVER... quando você controlar o hover statecomjQuery.onMouseOver por exemplo, só funciona (às vezes) o método One.

Espero que ajude.

Se o foco for disparado por JS, apenas pause a execução do script por meio do teclado. Esta é uma maneira muito mais simples de congelar o DOM do que as outras respostas sugerem.

Veja como você faz isso no Chrome. Tenho certeza de que o Firefox tem um procedimento equivalente:

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 IU para fazer com que o elemento apareça.

4. Acertar F8 .
5. Agora você pode mover o mouse, inspecionar o DOM, qualquer coisa. O elemento ficará lá.

O que funcionou para mim foi selecionar a tag específica que eu queria inspecionar e fazer o seguinte:

Depois de fazer o acima, eu normalmente selecionaria novamente uma tag e a lista suspensa ficará automaticamente como está, mesmo quando eu passar o mouse sobre outros lugares como Inspecionar elemento, etc.

Você pode apenas atualizar o navegador ao inspecionar os elementos suspensos do menu para voltar ao estado normal.

Espero que isto ajude. :)

Você também pode fazer isso no console javascript:

$('#foo').trigger('mouseover');

Um que irá "congelar" o elemento no estado "pairar".

É assim que faço isso sem alterações de CSS ou pausa de JS no Chrome (estou em um Mac e não tenho um PC na minha frente se você estiver executando no Win):

1. tenha seu console de desenvolvedor aberto.
2. não habilite a ferramenta de inspeção instantânea ainda, mas, em vez disso, abra o submenu desejado movendo o mouse sobre ele.
3. pressione Command+ Shift+ C(Mac) ou Ctrl+ Shift+ C(Win / Linux)

agora, a ferramenta de inspeção instantânea será aplicada aos elementos que você abriu no seu subnav.

Não tenho certeza se ele estava presente nas revisões anteriores do navegador, mas acabei de descobrir esse método extremamente simples.

Abra o inspetor no Chrome ou Firefox, clique com o botão direito no elemento de seu interesse e selecione a opção apropriada (neste caso: pairar). Isso acionará o CSS associado.

Capturas de tela do Firefox 55 e do chromium 61.

Excelente!

Obrigado ao gmo por esse conselho. Eu não sabia sobre essas configurações de atributos extremamente úteis.

Como uma pequena revisão do texto, eu explicaria esse processo da seguinte forma:

• Clique com o botão direito no elemento que você gostaria de estilizar

  • Abra a ferramenta 'Inspecionar'

  • No lado direito, navegue até a pequena guia Estilos

  • Encontrado acima do conteúdo da folha de estilo CSS

  • Selecione a opção .hov - Isso lhe dará todas as configurações disponíveis para o elemento HTML selecionado

  • Clique e altere todas as opções para ficar inativo

  • Agora selecione o estado que você gostaria de ajustar - Na ativação de qualquer um deles, sua folha de estilo o levará diretamente para as configurações:

Estilos - Filtros de ajuste - Elementos interativos

Esta informação foi um salva-vidas para mim, não posso acreditar que acabei de ouvir sobre isso!

mude o CSS para que a propriedade que oculta o menu não seja aplicada enquanto você trabalha nisso, é o que eu faço.

Eu precisava fazer isso, mas o elemento que estava tentando inspecionar foi adicionado e removido dinamicamente com base no estado de foco de outro elemento. Minha solução é semelhante a esta , mas não funcionou muito bem para mim.

Então aqui está o que eu fiz:

1. Adicione um script simples para entrar no modo de depurador no mouseoverelemento que aciona o evento de foco que você está preocupado.

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. Então, com o console dev aberto no Chrome, passe o mouse sobre o seu elemento e você entrará no modo de depuração. Navegue até a seção de fontes das ferramentas de desenvolvimento e clique no botão "Retomar execução do script" (o botão azul semelhante a uma reprodução abaixo).

Depois de fazer isso, seu DOM será pausado no estado de foco e você pode usar o inspetor de elemento para inspecionar todos os elementos que existem nesse estado.