¿Inspeccionar elemento flotante en Chrome?

106

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?

Skitterm
fuente
Puede encontrar otra solución aquí para Chrome y Firefox
Muhammed Abdelfattah

Respuestas:

80

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.

Justin Chmura
fuente
12
Bueno, sí, pero no en Mac.
actimel
2
- Paso 1: Inspeccione el elemento que genera la información sobre herramientas para abrir las herramientas de desarrollo de Chrome. - Paso 2: mientras se desplaza sobre el elemento, aparecerá la información sobre herramientas. Sin salir del elemento, abra una nueva ventana (Comando-N en Mac, Ctrl-N en otro lugar) - Paso 3: Arrastre la nueva ventana debajo de la ventana anterior, para que aún pueda ver la información sobre herramientas, luego mueva el cursor al inspector de elementos . - Paso 4: Desplácese hasta la parte inferior, donde la información sobre herramientas se adjunta al DOM. Haga clic en el elemento para ver su estilo.
pgblu
2
PD: esto no funciona para la información sobre herramientas que se genera a través de Javascript desde el propio atributo de título del elemento, como ocurre, por ejemplo, en SO. Esa información sobre herramientas utiliza un estilo predeterminado.
pgblu
Esto me ayudó para obtener información sobre herramientas en Kendo
k29
1
El truco: primero vaya a la pestaña de fuentes. Luego puede pausar Javascript con el botón F8. La tecla de pausa está ahí con el atajo de F8 / Ctrl + \ (La respuesta de @Rajan en esta página)
rostamiani
85

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.

joeyyang
fuente
6
Esta respuesta es realmente buena. Código mínimo, sin jQuery o configuración de monitor dual.
uKolka
1
¡Funcionó! Inicialmente, debido a una mala configuración, estaba viendo la información sobre herramientas HTML predeterminada y no la información sobre herramientas Bootstrap. Después de solucionar ese problema, su solución funcionó. Gracias.
DFB
2
Además, si pierde el enfoque mientras escribe debuggeren la consola, puede presionar alt+tabmientras se desplaza sobre el elemento. Funcionó para las aplicaciones Chromium en Windows.
Orcun
1
¡Esta fue una gran respuesta!
Nobita
La página de métodos abreviados de teclado de Chrome DevTools dice que es un control + `en lugar de un comando +` para volver a centrarse en la consola. Quizás cambió.
rinat.io
85

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.

Dwjohnston
fuente
4
Me gusta cómo en Stackoverflow, siempre que sigas desplazándote hacia abajo, encontrarás esa respuesta realmente buena que es mucho mejor que el resto. Esto es simple y fácil sin scripts adicionales.
Alexander Dixon
2
F8 no funcionó para mí por alguna razón, pero la pausa también está obligada a ctrl- \
Bryan Larsen
La mejor solución aquí
NiallMitch14
Ni <kbd> F8 </kbd> ni <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> en mi distribución de teclado alemán pausan el depurador.
prueba
63

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')
Adam Grant
fuente
1
$ ('. myelement'). tooltip ('open') es lo que funcionó para mí.
tekumara
6
A partir de Bootstrap 3, ahora es .tooltip('show') getbootstrap.com/javascript/#tooltips-methods
cneuro
2
En Chrome, se puede acceder al elemento seleccionado actualmente como $0en la consola. Por lo tanto, puede seleccionar el elemento que activa una información sobre herramientas y ejecutarlo $($0).tooltip('show').
Marko Grešak
31

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 ...)

Ali Kleit
fuente
También funciona en Electron.
xmedeko
24

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; 
      }
    });
  1. Resaltar elemento con inspector

  2. Presiona F12

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

mikemaccana
fuente
1
¡Inteligente! Exactamente lo que estaba buscando. Gracias :) Aunque no funcionó con F12 con mi configuración por alguna razón, usé keyCode == 13 y presioné ENTER.
Jeremy F.
2
gran solucion! Sugeriría guardar este fragmento útil en el área FUENTE -> SNIPPETS de Chrome para que pueda ejecutarlo con solo un doble clic;)
Magico
1
Esta solución es muy superior a la aceptada. ¡Lo convertiré en un bookmarklet!
Lulu
1
Gran solucion Muy inteligente.
Charlie Dalsass
1
Perfecto. ¡Debe ser la respuesta correcta / aceptada!
Brosig
10

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>
TobyLL
fuente
5

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.

clhenrick
fuente
4

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.

Parvez Ahmed
fuente
2

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.

lxg
fuente
2

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

Rajan
fuente
1

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 ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

Catalin
fuente
0

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.

Felipe
fuente
0

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.

usuario1806949
fuente
0

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í.

Nolan Lindeke
fuente
0

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)

Establecer una interrupción en el elemento principal

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!

Ricardo Magalhães
fuente
0

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

HERAwais
fuente
0

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.

Okau123
fuente
-1

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.

John Rix
fuente
-2

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

Kaspars Siricenko
fuente
Esto no ayuda @Kaspars
Es Noguera
@EsNoguera podría ser más específico por qué. Esta es la forma en que funcionó para mí. Desde que encontré un método que funcionó, ¿por qué es malo ser sugerido?
Kaspars Siricenko