Estoy tratando de ver a través de google Chrome developer tools, descripciones de cómo están estructurados en un sitio. Sin embargo, incluso cuando estoy cernía sobre el tema, cuando me «inspeccionar elemento», no se ve nada por la descripción en el código html. Sé que puede establecer el Estilo de :hover, pero aún no puedo ver el código html o css de la descripción.

Alguna idea?

InformationsquelleAutor Skitterm | 2013-03-12

13 Comentarios

  1. 64

    De hecho, encontré un truco para hacer que con el Twitter Bootstrap información sobre herramientas. Si abre el dev tools (F12) en otro monitor, a continuación, coloca el cursor sobre el elemento para que aparezca la información sobre herramientas, haga clic en como si estuviera seleccionar la opción «Inspeccionar Elemento». Dejando que el menú contextual abrir, mover el foco a la dev tools. El código html para la descripción debe aparecer junto al elemento de su descripción en el código HTML. A continuación, puede ver como si se tratara de otro elemento. Si usted vuelve a Chrome el HTML desaparece tan sólo es algo a tener en cuenta.

    Tipo de un modo extraño, pero a mí me funcionó así que pensé en compartirlo.

    • Bueno, sí, pero no en Mac.
    • esto no funciona en bootstrap 3.
    • – Paso 1: Inspeccionar elemento que genera la descripción para abrir el Chrome Dev tools. – Paso 2: al pasar el mouse sobre el elemento, su descripción aparecerá. Sin dejar el elemento, abra una nueva ventana de Comandos (- N en Mac, Ctrl-N en otros lugares) – Paso 3: Arrastre la nueva ventana debajo de la ventana anterior, por lo que aún puede ver la información sobre herramientas, a continuación, mueva el cursor en el Elemento inspector. – Paso 4: Desplácese a la parte inferior, donde su descripción se anexa a la catedral. Haga clic en el elemento para ver su estilo.
    • P. S. esto no funciona para la información sobre herramientas que se han generado a través de Javascript del elemento del propio atributo de título, como por ejemplo sucede ASÍ. Los tooltips el uso de un estilo predeterminado.
    • Esto me ayudó para la información sobre herramientas en el Kendo
    • Utilizado con éxito con Bootstrap 3

  2. 65

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

    Golpe command-option-j para abrir la consola. Haga clic en la ventana de apariencia botón en la esquina superior derecha de la consola para abrir la consola en una ventana diferente.

    A continuación, en el Chrome ventana, coloca el cursor sobre el elemento que desencadena la ventana emergente, golpeó command-` sin embargo, muchas veces usted necesita para centrarse en la consola, a continuación, escriba debugger. Que voy a congelar la página, entonces usted puede inspeccionar el elemento en la ficha Elementos.

    • Esta respuesta es muy agradable. El mínimo código, no jQuery o configuración de monitor dual.
    • Funcionó! Inicialmente debido a algún error de configuración, yo estaba viendo el HTML por defecto la información de herramientas y no el Bootstrap de información sobre herramientas. Después de arreglar ese problema, su solución funcionó. Gracias.
    • debugger no trabajo para mí, pero F8 hace.
    • Además, si pierdes el foco, mientras que la escritura debugger a la consola, puede pulsar alt+tab al pasar el mouse sobre el elemento. Trabajó para el Cromo aplicaciones en Windows.
    • Esta fue una gran respuesta!
  3. 60

    Usted necesita para forzar la descripción para mostrar como tal

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

    Ahora la información sobre herramientas mostrará independientemente de flotando estado.

    Desplácese hacia abajo cerca de la parte inferior de la DOM donde usted debe ver el marcado.

    Actualización ver cneuro comentario para Bootstrap 3.

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

    Actualización ver Marko Grešak la respuesta para Chrome y al parecer Safari así, $0 puede ser utilizado como un acceso directo para el elemento seleccionado actualmente. Esto parece que funciona en Safari también.

    $($0).tooltip('show')
    • $(‘.myelement’).tooltip («abrir») es lo que ha funcionado para mí.
    • Como de Bootstrap 3, esto es ahora .tooltip('show') getbootstrap.com/javascript/#tooltips-methods
    • En Chrome, el elemento seleccionado actualmente se puede acceder a $0 en la consola. Por lo tanto, usted puede seleccionar el elemento que desencadena una descripción y ejecutar $($0).tooltip('show').
  4. 52

    F8 hará una pausa de depuración.

    Ratón sobre la descripción y pulse F8 mientras se muestra.

    Ahora puede utilizar el inspector para buscar en el CSS.

    • Me gusta la forma en Stackoverflow, como siempre que se mantenga el desplazamiento hacia abajo usted encontrará que una muy buena respuesta que está lejos y más allá mejor que el resto. Esto es simple y fácil, sin la extra de secuencias de comandos.
    • F8 no funciona para mí, por alguna razón, pero la pausa está también obligado a ctrl-\
    • Ohhh amigo…. Lo que es una increíble solución.
    • esta debe ser la aceptación de la omi
  5. 21

    Para mí, la aceptación de respuesta no de trabajo: haga clic en DevTools de inmediato cerró la Descripción.

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

    1. En la consola, Ejecute:

      window.addEventListener('keydown', function(e) {
      if (e.keyCode == 123) debugger;
      });
    2. Resaltar el elemento con el inspector de

    3. Golpe F12

    Ahora usted puede inspeccionar el elemento, con JavaScript pausa para el DOM no va a cambiar.

    • Inteligente ! Exactamente lo que estaba buscando. Gracias 🙂 a Pesar de no trabajar con F12 con mi configuración por alguna razón, así que he usado keyCode == 13 y presiona ENTRAR.
    • gran solución! yo sugeriría a guardar este fragmento de código en la FUENTE -> FRAGMENTOS de área de chrome, de modo que puede ejecutar con sólo un doble clic 😉
    • Esta solución es muy superior a la aceptada uno. Voy a hacer en un bookmarklet!
    • Gran solución. Muy inteligente.
  6. 5

    Sin solución de código para JS activado la información sobre herramientas:

    Con Chrome devtools inspeccionar el contenido de los padres /elemento de la descripción. En los «elementos» de la ficha, haga clic en el contenedor elemento de DOM, a continuación, elija «break on» > «subárbol modificaciones». La próxima vez que pase por encima de la parte de la DOM de la descripción se encuentra en el código JS pausa permitiendo inspeccionar el contenido de la descripción.

  7. 3

    Ventanilla única respuesta, sin codificación

    Ninguna de las otras respuestas son bastante derecho, o tener el suficiente detalle, así que aquí está mi intento.

    • Abrir Chrome DevTools utilizando F12 o Ctrl+Mayús+I (Windows/Linux) o Comando+Opción+I (Mac).
    • Seleccione el Fuentes en la ficha de DevTools ventana.
    • Utilizando el ratón sobre el elemento a inspeccionar, a hacer la descripción visible.
    • Presione F8 (Windows/Linux/Mac) para pausar la ejecución del script. La ventana principal de gris, y una «Pausa en el depurador de» ventana emergente aparecerá.
    • En la DevTools de la ventana, seleccione la Elementos ficha
    • Para el Bootstrap información sobre herramientas, la descripción aparecerá como el último <div> en el <body>
  8. 2

    Aquí una solución simple: Si usted tiene dinámico de la información de herramientas, usted puede hacer de ellos «persistente» por (temporalmente) el cambio en el evento de disparo para click. Esto tendrá el efecto de que la descripción sólo desaparece en un clic-out:

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

    De esta manera, puede fácilmente ser inspeccionados con FF o Chrome herramientas de depuración.

  9. 0

    He tenido problemas con esto así que me fui la documentación y examinado la información sobre herramientas que ya está representado en la página. Que me ayudó a ver el dom estructura de la descripción y modificar en consecuencia.

  10. 0

    En Chome en Linux esto se puede lograr por JS generado la información de herramientas tales como las referencias en WikiPedia haciendo lo siguiente:

    Como se indicó anteriormente, abra el dev utilizando herramientas F12. Abrir en otra ventana.
    Resaltar la descripción y haga clic en Ctrl-Shift-C (El HTML en el Inspector). Como usted se mueve más de la punta, el dev ventana se muestran en la sección correspondiente.

    Si usted necesita para mantener la punta abierta cuando el ratón fuera de ella, para ser capaz de inspeccionar en la otra ventana más a fondo, a continuación, haga clic en la descripción y salir del menú de contexto de seguridad, y haga clic en el desarrollo de herramientas de la ventana. En este escenario se sale de la punta hasta en la wikipedia ventana.

    A un grado también funciona con bootstrap consejos.

  11. 0

    Por alguna razón, las respuestas aquí no fueron a trabajar para mí en Windows. Yo era capaz de inspeccionar la descripción por apertura de las dev tools, luego se cierne sobre el elemento que trae la descripción, a continuación, haga clic en el elemento (no la descripción). A continuación, mueva el cursor en el panel inspector y desplácese hacia abajo hasta la parte inferior. La descripción elemento debería estar allí todavía.

  12. 0

    1)Abra la ventana Inspect pulsando F12

    2)Ir a la pestaña fuente(junto a la consola)

    3)Ahora el puntero del mouse sobre el elemento a inspeccionar y mantener el ratón sobre no.

    4)Mediante el teclado(Tab o mayús+tab para mover el control de botón de pausa o F8Consulte la imagen

    5)Cuando el foco del teclado esté en el botón de Play. Pulsa enter. Su pase elemento será congelada puede hacer nada ahora

  13. -1

    La pena señalar que alternar el :hover estado desde dentro el dev tools sólo tiene un impacto si el texto de la sugerencia está habilitado a través de CSS :hover reglas en el primer lugar. La alternancia sólo se aplica el hover del estado para el elemento de la representación, pero no se activa el correspondiente JavaScript evento mouseover.

    Muchos frameworks como AngularJS dinámicamente adjuntar la descripción de HTML en la parte inferior del cuerpo del documento a través de JavaScript cuando un elemento de destino se cernía, por lo que cualquier cantidad de sostenerlo y a inspeccionar el elemento de destino no ayuda.

    @joeyyang la respuesta trabajado muy bien para mí en este escenario.

Dejar respuesta

Please enter your comment!
Please enter your name here