html - teclado - inspeccionar elemento guardar cambios

¿Inspeccionar elemento flotante en Chrome?

Question

Estoy tratando de ver, a través de las herramientas de desarrollo de Chrome, cómo se estructuran las sugerencias de herramientas en un sitio. Sin embargo, incluso cuando me coloco sobre el elemento, cuando "inspecciono el elemento", no aparece nada para la información sobre herramientas en el html. Sé que puedo configurar el Estilo en :hover , pero aún no puedo ver el html o css de la información sobre herramientas.

¿Algunas ideas?

Answer 1

Aquí hay una solución simple: si tiene información sobre herramientas dinámica, puede hacer que sean "persistentes" cambiando (temporalmente) el evento de activación para click . Esto tendrá el efecto de que la información sobre herramientas solo desaparece 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.

Answer 2

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 pase 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 hacia las herramientas de desarrollo. El código HTML de la información sobre herramientas debe aparecer junto al elemento, es una información sobre herramientas en el HTML. Entonces puedes mirarlo como si fuera otro elemento. Si vuelves a Chrome, el HTML desaparece, así que debes tener en cuenta algo.

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

Answer 3

En Chome en Linux, esto se puede lograr para las informaciones sobre herramientas generadas por JS, como las referencias en WikiPedia, haciendo lo siguiente:

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

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

Hasta cierto punto, también funciona con consejos bootstrap.

Answer 4

No hay solución de código para JS información sobre herramientas activada:

Con los devtools de Chrome, inspecciona el elemento que contiene / padre de la información sobre herramientas. En la pestaña "elementos", haga clic con el botón derecho en el elemento DOM del contenedor y, a continuación, seleccione "romper en"> "modificaciones de subárbol". La próxima vez que se desplace sobre la parte del DOM en la que 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.

Answer 5

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

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

1. En la consola :, Ejecute: window.addEventListener(''keydown'', function(e) { if (e.keyCode == 123) debugger; });

2. Elemento resaltado con inspector

3. Pulsa F12

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

Answer 6

Por alguna razón, las respuestas proporcionadas aquí no me funcionaban 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 sobre ese elemento (no sobre la información sobre herramientas). Luego, mueva el cursor hacia el panel del inspector y desplácese hacia abajo hasta la parte inferior. El elemento de información sobre herramientas todavía debería estar allí.

Answer 7

Solo deberías forzar la información sobre herramientas para mostrar 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'');

En la actualización, vea la respuesta de Marko Grešak para Chrome y, al parecer, también para Safari, $0 se puede usar como acceso directo para el elemento seleccionado actualmente. Esto parece funcionar en Safari también.

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

Answer 8

Tuve problemas con esto, así que fui getbootstrap.com/javascript/#tooltips-methods e inspeccioné la información sobre herramientas que ya está representada en la página. Eso me ayudó a ver la estructura de dominio de la información sobre herramientas y editarla en consecuencia.

Answer 9

Vale la pena señalar que cambiar el estado: hover dentro de las herramientas dev solo tiene un impacto si el texto de la sugerencia está habilitado a través de las reglas CSS: hover en primer lugar. El conmutador solo aplica el estado de desplazamiento al elemento para fines de representación, pero no desencadena 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.

Answer 10

F8 hará una pausa en la depuración.

Pase el ratón sobre la información sobre herramientas y presione F8 mientras se muestra.

Ahora puede utilizar el inspector para ver el CSS.

Answer 11

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

Pulsa command-option-j para abrir la consola. Haga clic en el botón que mira la ventana en la esquina superior derecha de la consola para abrir la consola en una ventana diferente.

Luego, en la ventana de Chrome, desplácese sobre el elemento que activa el popover, presione el command-` sin embargo, muchas veces necesita enfocarse en la consola, luego escriba el debugger . Eso congelará la página, luego puede inspeccionar el elemento en la pestaña Elementos.