Inspeccione el elemento que solo aparece cuando se pasa el mouse o se ingresa a otro

A menudo quiero inspeccionar un elemento (por ejemplo, información sobre herramientas) que solo aparece cuando se pasa el mouse por encima o se ingresa a otro elemento. El elemento que aparece se hace visible a través del evento mouseenter de jQuery.

No puedo inspeccionar la información sobre herramientas, ya que la información sobre herramientas desaparece cuando mi mouse abandona el elemento contenedor.

¿Hay alguna forma de pausar los eventos de JS para poder desplazarme sobre el elemento, luego pausar el JS del navegador e inspeccionarlo correctamente?

Por ejemplo, intente inspeccionar la información sobre herramientas de arranque de Twitter: http://getbootstrap.com/javascript/#tooltips .

Es bastante fácil en Chrome 38.0.2094.0.

Así es como se verá:

Paso a paso:

1. Abra DevTools en el panel Fuentes
2. Haga que aparezca la información sobre herramientas colocando el cursor sobre el botón
3. Presione F8 para congelar la página
4. Cambie al panel Elementos y use el icono de la lupa en la parte superior izquierda para seleccionar la información sobre herramientas

Si la información sobre herramientas aparece debido a CSS, esto es lo que puede hacer en ese caso:

Paso a paso:

1. Abra DevTools
2. Seleccione el elemento desencadenante en las herramientas de desarrollo (el enlace)
3. Haga clic con el botón derecho, seleccione "forzar el estado del elemento" y seleccione ": desplazarse"
4. Inspeccionar la información sobre herramientas de CSS

Tanto el inspector web ofrece casillas de verificación de Chrome de Safari y donde se puede alternar el :active, :focus, :hovery el :visitedestado de un elemento. Usarlos podría ser aún más fácil.

Safari:

Cromo:

También hay otra forma complicada de hacerlo:

1. Repase el elemento que hace que aparezca su información sobre herramientas.
2. Haga clic derecho para abrir el menú contextual.
3. Mueva el mouse a la ventana de la herramienta de desarrollo y haga clic con el botón izquierdo en cualquier lugar del panel de herramientas de desarrollo.

Su información sobre herramientas permanecerá visible, luego podrá inspeccionarla en la pestaña Elemento.

Probado en Chrome. No parece funcionar en Firefox.

Si bien la respuesta de @ SomeGuy es excelente (t-up para gifs animados), como alternativa, siempre puede hacerlo mediante programación. Simplemente abre la consola y escribe el nombre del evento.

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

(con la sintaxis específica pura de JavaScript puede variar según el navegador)

Aún más fácil con jQuery:

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

En su ejemplo ( http://getbootstrap.com/javascript/#tooltips ), abra la consola y escriba, por ejemplo:

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

Y la información sobre herramientas aparece en el DOM y se puede inspeccionar / modificar 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>

Al igual que en los comentarios, si mueve el puntero del mouse sobre el marco de la página, puede activar otros eventos como mouseout. Para evitar esto, puede presionar F8(como en la respuesta de acc.) O escribir debugger;(que es su secuencia de comandos equivalente)