¿Inspeccionar elemento flotante en Chrome?

Estoy tratando de ver, a través de las herramientas de desarrollo de Chrome, cómo se estructuran las descripciones emergentes en un sitio. Sin embargo, incluso cuando estoy sobre el elemento, cuando "inspecciono el elemento", no se muestra nada para la información sobre herramientas en el html. Sé que puedo establecer el estilo en :hover, pero todavía no puedo ver el html o css de la información sobre herramientas.

¿Algunas ideas?

De hecho, encontré un truco para hacer eso con la información sobre herramientas de Twitter Bootstrap. Si abre las herramientas de desarrollo (F12) en otro monitor, luego coloque el cursor sobre el elemento para que aparezca la información sobre herramientas, haga clic derecho como si fuera a seleccionar 'Inspeccionar elemento'. Dejando ese menú contextual abierto, mueva el foco a las herramientas de desarrollo. El html para la información sobre herramientas debería aparecer junto al elemento para el que es una información sobre herramientas en el HTML. Entonces puedes mirarlo como si fuera un elemento más. Si regresa a Chrome, el HTML desaparece, así que es algo a tener en cuenta.

Un poco extraño, pero funcionó para mí, así que pensé que lo compartiría.

Esta solución funciona sin ningún código adicional.

Presiona command-option-jpara abrir la consola. Haga clic en el botón de ventana en la esquina superior derecha de la consola para abrir la consola en una ventana diferente.

Luego, en la ventana de Chrome, coloque el cursor sobre el elemento que activa el popover, presione las command-`veces que necesite para enfocarse en la consola, luego escriba debugger. Eso congelará la página, luego podrá inspeccionar el elemento en la pestaña Elementos.

F8 Pausará la depuración.

Pase el mouse sobre la información sobre herramientas y presione F8mientras se muestra.

Ahora puede usar el inspector para ver el CSS.

Solo necesitaría forzar la información sobre herramientas para que se muestre como tal

$('.myelement').tooltip('open');

Ahora la información sobre herramientas se mostrará independientemente del estado de desplazamiento.

Desplácese hacia abajo cerca de la parte inferior del DOM donde debería ver el marcado.

Actualización ver comentario de cneuro para Bootstrap 3.

$('.myelement').tooltip('show');

Actualización, vea la respuesta de Marko Grešak para Chrome y aparentemente Safari también, $0se puede usar como un atajo para el elemento seleccionado actualmente. Esto parece funcionar también en Safari.

$($0).tooltip('show')

Haga clic en f12ir a la pestaña de la consola y agregue lo siguiente:

setTimeout(()=> {debugger},5000)

Esto le dará 5 segundos para hacer lo que quiera y se romperá en 5 seconds . Entonces puedes inspeccionar el elemento de destino

(por ejemplo, coloque el elemento y espere 5 segundos y luego inspeccione ...)

Para mí, la respuesta aceptada no funcionó: hacer clic en DevTools cerró inmediatamente la información sobre herramientas.

Sin embargo, encontré /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution que me ayudó:

1. En la consola :, Ejecute:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

2. Resaltar elemento con inspector

3. Presiona F12

Ahora puede inspeccionar el elemento, con JavaScript en pausa para que el DOM no cambie.

Respuesta de ventana única, sin codificación

Ninguna de las otras respuestas es del todo correcta o tiene suficientes detalles, así que aquí está mi intento.

• Abra DevTools de Chrome usando F12 / Ctrl + Shift + I (Windows / Linux) o Comando + Opción + I (Mac).
• Seleccione la pestaña Fuentes en la ventana DevTools.
• Con el mouse, coloque el cursor sobre el elemento que desea inspeccionar para que la información sobre herramientas sea visible.
• Presione F8 (Windows / Linux / Mac) para pausar la ejecución del script. La ventana principal se atenuará y aparecerá la ventana emergente "Paused in debugger".
• En la ventana DevTools, seleccione la pestaña Elementos
• Para la información sobre herramientas de Bootstrap, la información sobre herramientas aparecerá como la última <div>en el<body>

Sin solución de código para información sobre herramientas activada por JS:

Con las herramientas de desarrollo de Chrome, inspeccione el elemento principal / contenedor de la información sobre herramientas. En la pestaña "elementos", haga clic con el botón derecho en ese elemento DOM contenedor y luego elija "romper en"> "modificaciones de subárbol". La próxima vez que pase el cursor sobre la parte del DOM donde se encuentra la información sobre herramientas, el código JS se pausará, lo que le permitirá inspeccionar el contenido de la información sobre herramientas.

Sigue estos pasos

1. InspectVentana abierta en cromo.

2. Coloque el mouse sobre la información sobre herramientas.

3. prensa F8

   La ejecución de JS se pausará y luego podrá inspeccionar la información sobre herramientas.

4. Presione F8nuevamente para iniciar la ejecución y F10depurar.

Aquí hay una solución simple: si tiene información sobre herramientas dinámicas, puede hacerlas "persistentes" cambiando (temporalmente) el evento de activación a click. Esto tendrá el efecto de que la información sobre herramientas solo desaparezca al hacer clic:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

De esta manera, se puede inspeccionar fácilmente con las herramientas de depuración de FF o Chrome.

1) Abra la ventana Inspeccionar haciendo clic en F12

2) Vaya a la pestaña de origen (junto a la consola)

3) Ahora coloque el cursor sobre el elemento que desea inspeccionar y mantenga el mouse allí.

4) Usando el teclado (Tab o shift + tab) para mover el control al botón de pausa o F8 Consulte la imagen

5) Cuando el enfoque del teclado está en el botón Reproducir. Pulsa Enter. Su elemento flotante se congelará, puede hacer cualquier cosa ahora

es tan sencillo editar estas descripciones emergentes.

Paso 1 : inspecciona el elemento que tiene la información sobre herramientas. Asegúrate de que esté resaltado en azul en devtools.

Paso 2 : haga clic con el botón derecho en el elemento (en la parte de devtools) y seleccione: modificaciones de atributos, en Romper en

Paso 3 : coloque el cursor sobre el elemento inspeccionado y aparecerá una superposición gris sobre el sitio con un pequeño texto: Paused in debugger

en la parte superior de tu pantalla

Paso 4 : Haga clic en la flecha azul hasta que se seleccione el estado de desplazamiento.

Paso 5 : inspeccionar y editar la información sobre herramientas

Tuve problemas con esto, así que fui a la documentación e inspeccioné la información sobre herramientas que ya se muestra en la página. Eso me ayudó a ver la estructura dom de la información sobre herramientas y editarla en consecuencia.

En Chome en Linux, esto se puede lograr para información sobre herramientas generada por JS, como las referencias en WikiPedia, haciendo lo siguiente:

Como se indicó anteriormente, abra las herramientas de desarrollo con F12. Ábrelos en otra ventana. Resalte la información sobre herramientas y haga clic en Ctrl-Shift-C (El inspector de HTML). A medida que avanza sobre la sugerencia, la ventana de desarrollo mostrará la sección correspondiente.

Si necesita mantener la punta abierta cuando coloca el mouse fuera de ella, para poder inspeccionarla en la otra ventana más a fondo, haga clic con el botón derecho en la información sobre herramientas y deje el menú contextual arriba, y haga clic en la ventana de herramientas de desarrollo. En este escenario, deja la propina en la ventana de wikipedia.

Hasta cierto punto, también funciona con sugerencias de arranque.

Por alguna razón, las respuestas proporcionadas aquí no me funcionaron en Windows. Pude inspeccionar la información sobre herramientas abriendo las herramientas de desarrollo, luego colocando el cursor sobre el elemento que muestra la información sobre herramientas y luego haciendo clic derecho en ese elemento (no en la información sobre herramientas). Luego, mueva el cursor hacia el panel del inspector y desplácese hacia abajo hasta el final. El elemento de información sobre herramientas aún debería estar allí.

Las herramientas de desarrollo proporcionan una forma de inspeccionar un elemento flotante como una información sobre herramientas.

1 - Abra las herramientas de desarrollo con F12.

2 - Seleccione la pestaña "Elementos".

3 - Seleccione el elemento principal que contiene la información sobre herramientas.

4 - Haga clic en "..." (en la línea del elemento padre) y luego seleccione "Romper en" / "modificaciones de subárbol" (ver imagen a continuación)

5 - Finalmente regrese a la aplicación y haga que aparezca la información sobre herramientas. Debería bloquear la ejecución después de que la información sobre herramientas sea visible

¡Espero que pueda ser útil para alguien!

Otra solución que encontré para este problema. A través de la vista móvil o tableta en Chrome, presione Crt + Shift + M en las herramientas de desarrollo de Chrome para la vista móvil en Chrome. Haga clic (toque) en la información sobre herramientas div y podrá inspeccionarla con el botón derecho del ratón en la información sobre herramientas

Golpear command-option-jpara abrir la consola. Haga clic en el botón de ventana en la esquina superior derecha de la consola para abrir la consola en una ventana diferente.

Luego, en la ventana de Chrome, coloque el cursor sobre el elemento que activa el popover, presione las command-veces que necesite para enfocarse en la consola, luego escriba debugger. Eso congelará la página; luego puede inspeccionar el elemento en la pestaña Elementos.

Vale la pena señalar que alternar el estado: hover desde dentro de las herramientas de desarrollo solo tiene un impacto si el texto de la sugerencia está habilitado a través de CSS: reglas de hover en primer lugar. La alternancia solo aplica el estado de desplazamiento al elemento con fines de representación, pero no activa un evento de mouseover de JavaScript correspondiente.

Muchos marcos, como AngularJS, adjuntan dinámicamente HTML de información sobre herramientas a la parte inferior del cuerpo del documento a través de JavaScript cuando se desplaza un elemento de destino, por lo que cualquier cantidad de desplazamiento e inspección del elemento de destino no ayudará.

La respuesta de @joeyyang funcionó muy bien para mí en este escenario.

Una de las formas más fáciles que encontré es:

1. Abra las herramientas de desarrollo de Chrome en el lateral

2. Coloca el cursor sobre el elemento

3. Botón derecho del ratón

4. Haga clic en herramientas de desarrollo

5. Ahora puede inspeccionar y cambiar estilos