Inspecione o elemento que só aparece quando outro elemento é sobreposto / inserido

Freqüentemente, desejo inspecionar um elemento (por exemplo, dica de ferramenta) que só aparece quando outro elemento é sobreposto / inserido com o mouse. O elemento que aparece torna-se visível por meio do evento mouseenter do jQuery.

Não consigo inspecionar a dica de ferramenta, pois ela desaparece quando meu mouse deixa o elemento que o contém.

Existe uma maneira de pausar eventos JS para que eu possa passar o mouse sobre o elemento, pausar o JS do navegador e inspecioná-lo com êxito?

Por exemplo, experimente inspecionar as dicas de ferramentas de bootstrap do Twitter: http://getbootstrap.com/javascript/#tooltips .

É bastante fácil no Chrome 38.0.2094.0.

Esta será a aparência:

Passo a passo:

1. Abra o DevTools no painel Sources
2. Faça a dica de ferramenta aparecer passando o mouse sobre o botão
3. Pressione F8 para congelar a página
4. Mude para o painel Elementos e use o ícone da lupa no canto superior esquerdo para selecionar a dica de ferramenta

Se a dica de ferramenta aparecer por causa do CSS, eis o que você pode fazer nesse caso:

Passo a passo:

1. Abra o DevTools
2. Selecione o elemento acionador nas ferramentas de desenvolvimento (o link)
3. Clique com o botão direito e selecione "forçar estado do elemento" e selecione ": pairar"
4. Inspecione a dica de ferramenta CSS

Ambos do Safari e inspetor web oferece caixas do Chrome onde você pode alternar a :active, :focus,:hover e :visitedestado de um elemento. Usar isso pode ser ainda mais fácil.

Safári:

Cromada:

Também há outra maneira complicada de fazer isso:

1. Vá até o elemento que faz sua dica de ferramenta aparecer.
2. Clique com o botão direito para abrir o menu contextual.
3. Mova o mouse para a janela da ferramenta de desenvolvimento e clique com o botão esquerdo em qualquer lugar no painel de ferramentas de desenvolvimento.

Sua dica de ferramenta ficará visível, então você poderá inspecioná-la na guia Elemento.

Testado no Chrome. Não parece funcionar no Firefox.

Embora a resposta de @AlgunsGuy seja excelente (t-up para GIFs animados), como alternativa, você sempre pode fazê-lo programaticamente. Basta abrir o console e digitar o nome do evento

document.getElementById('id').dispatchEvent(new Event('event-type'));

(com sintaxe específica de javascript puro pode variar de navegador)

Ainda mais fácil com jQuery:

$('#id').trigger('event-type');

Em seu exemplo ( http://getbootstrap.com/javascript/#tooltips ), abra o console e digite, por exemplo:

$("button:contains('Tooltip on right')").mouseenter();

E a dica de ferramenta aparece no DOM e pode ser inspecionada / modificada manualmente:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

Como nos comentários, se você mover o ponteiro do mouse sobre o quadro da página, poderá acionar outros eventos, como mouseout. Para evitar isso, você pode pressionar F8(como na resposta de acesso) ou digitar debugger;(que é o equivalente do script)