javascript - ejemplo - html title attribute

Inspeccione el elemento que solo aparece cuando otro elemento se sobreescribe/ingresa

Question

A menudo quiero inspeccionar un elemento (por ejemplo, información sobre herramientas) que solo aparece cuando se sobrepone / ingresa otro elemento. El elemento que aparece se hace visible a través del evento jQuery''s mouseenter.

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

¿Hay alguna forma de detener los eventos de JS para que pueda pasar el cursor sobre el elemento, pausar el JS del navegador e inspeccionarlo con éxito?

Para un ejemplo, intente inspeccionar tooltips de arranque de Twitter: http://getbootstrap.com/javascript/#tooltips .

Answer 1

Es bastante fácil en Chrome 38.0.2094.0.

Esto es lo que se verá:

Paso a paso:

1. Abra DevTools en el panel Orígenes
2. Haga que la información sobre herramientas aparezca al colocar el cursor sobre el botón
3. Presione F8 para congelar la página
4. Cambie al panel Elementos y use el ícono 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 las herramientas de desarrollo
2. Seleccione el elemento desencadenante en las herramientas de desarrollo (el enlace)
3. Haga clic derecho, y seleccione "estado del elemento de fuerza", y seleccione ": hover"
4. Inspeccione la información sobre herramientas de CSS

Answer 2

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

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

(con la sintaxis específica 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 página, puede desencadenar otros eventos como mouseout . Para evitar esto, puede presionar F8 (como en la respuesta acc) o escribir debugger; (que es su equivalente de script)

Answer 3

También hay otra forma complicada de hacerlo:

1. Revisa el elemento que hace que aparezca tu 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.

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

Probado en Chrome. No parece funcionar en Firefox.

Answer 4

Tanto Safari como Chrome''s Web Inspector ofrecen casillas de verificación en las que puede alternar entre :active :hover :focus :hover y estado :visited de un elemento. Usar esos podría ser aún más fácil.

Safari:

Cromo: