Ispeziona l'elemento che appare solo quando un altro elemento viene passato / inserito con il mouse

Spesso voglio ispezionare un elemento (es. Tooltip) che appare solo quando un altro elemento viene passato / inserito con il mouse. L'elemento che appare, è reso visibile tramite l'evento mouseenter di jQuery.

Non riesco a controllare il suggerimento, poiché il suggerimento scompare quando il mio mouse lascia l'elemento contenitore.

C'è un modo per mettere in pausa gli eventi JS in modo da poter passare il mouse sull'elemento, quindi mettere in pausa il JS del browser e ispezionarlo correttamente?

Ad esempio, prova a esaminare i suggerimenti del bootstrap di Twitter: http://getbootstrap.com/javascript/#tooltips .

È abbastanza facile in Chrome 38.0.2094.0.

Ecco come apparirà:

Passo dopo passo:

1. Apri DevTools nel pannello Sources
2. Fai apparire la descrizione comando passando con il mouse sul pulsante
3. Premere F8 per bloccare la pagina
4. Passa al pannello Elementi e utilizza l'icona della lente di ingrandimento in alto a sinistra per selezionare il suggerimento

Se il suggerimento viene visualizzato a causa del CSS, ecco cosa puoi fare in questo caso:

Passo dopo passo:

1. Apri DevTools
2. Seleziona l'elemento di attivazione negli strumenti di sviluppo (il collegamento)
3. Fai clic con il pulsante destro del mouse, seleziona "forza stato elemento" e seleziona ": hover"
4. Esamina la descrizione comando CSS

Entrambi di Chrome Web Inspector offerte caselle di Safari e dove è possibile attivare o disattivare la :active, :focus, :hovere :visitedlo stato di un elemento. Usarli potrebbe essere ancora più facile.

Safari:

Cromo:

C'è anche un altro modo complicato per farlo:

1. Passa sopra l'elemento che fa apparire il tuo suggerimento.
2. Fare clic con il tasto destro per aprire il menu contestuale.
3. Sposta il mouse sulla finestra degli strumenti di sviluppo e fai clic con il pulsante sinistro del mouse in un punto qualsiasi del pannello degli strumenti di sviluppo.

Il tuo suggerimento rimarrà visibile, sarai quindi in grado di ispezionarlo nella scheda Elemento.

Testato su Chrome. Non sembra funzionare su Firefox.

Mentre la risposta di @ SomeGuy è eccellente (t-up per gif animate), in alternativa puoi sempre farlo in modo programmatico. Basta aprire la console e digitare il nome dell'evento

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

(con pura sintassi specifica per javascript può variare in base al browser)

Ancora più facile con jQuery:

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

Nel tuo esempio ( http://getbootstrap.com/javascript/#tooltips ), apri la console e digita, ad esempio:

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

E il suggerimento viene visualizzato nel DOM e può essere ispezionato / modificato 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>

Come nei commenti, se sposti il ​​puntatore del mouse sul frame della pagina, puoi attivare altri eventi come mouseout. Per evitare ciò è possibile premere F8(come nell'acc. Answer) o digitare debugger;(che è l'equivalente dello script)