debugging - tinytask - Firebug: ¿Cómo inspeccionar los elementos cambiando con los movimientos del mouse?

grabar movimientos del mouse (13)

Al seleccionar :hover el :hover en el menú de CSS puede ser bueno si solo quiere inspeccionar algún código de CSS, no funciona si lo que quiere inspeccionar se cambia usando JavaScript.

Un simple truco en este caso es abrir Firebug en una ventana diferente (esquina superior derecha de la barra de Firebug) que mover el mouse en la ubicación deseada y arrastrar y soltar algo desde allí fuera de la ventana del navegador. Ahora puedes inspeccionar lo que sea en la ventana de Firebug. Simplemente no mueva el mouse nuevamente a la ventana del navegador.

A veces necesito inspeccionar elementos que solo aparecen en una página si coloca el mouse sobre algún área. El problema es que si comienzas a mover el mouse hacia la consola Firebug para ver los cambios, se desencadena el evento de salida del mouse y desaparecen todos los cambios que intento inspeccionar. ¿Cómo lidiar con tales casos?

Básicamente, estoy buscando algo que podría:

Cambia a la consola Firebug sin mover el mouse (usando atajos de teclado, tal vez? Pero no puedo entender cómo usar Firebug solo con el teclado)
Tener la capacidad de "congelar" la página para que los movimientos del mouse ya no desencadenen ningún evento.

Gracias.

Consola abierta:

Si tiene información sobre herramientas basada en JavaScript, encuentre los elementos aplicables en la consola con el selector apropiado. como a continuación y confirme que puede encontrar el elemento apropiado con los selectores.

$(''your selector'')

Escriba arriba javascript y presione enter. Tendrás una lista de elementos.

Ahora, por ejemplo, si la biblioteca agregó un evento en el mouseenter, ingrese la siguiente secuencia de comandos:

$(''your selector'').mouseenter()

Presione enter.

De esta forma, puede simular eventos de movimiento del mouse sin el mouse real. y puede usar un puntero de mouse real para investigar cosa en la herramienta de depuración.

Creo que también puedes hacer esto:

Elija el modo Inspeccionar Firebugs
Desplácese sobre el elemento que aparece el elemento que desea inspeccionar y luego use la tecla Tab varias veces para activar Firebug (me resultó difícil ver cuando Firebug era el componente activo, pero nada como prueba y error, cuando vi que Firefoxes La barra de herramientas Buscar estaba activa. Luego, alternar + Tab hacia atrás dos veces para acceder a Firebug.
Luego usaría las teclas de flecha L / R para contraer / expandir elementos y las teclas de flecha U / D para navegar a través de la consola Firebugs

¡Trabajó para mí de todos modos!

Descubrí que Chrome funciona de manera diferente a Firefox . En particular, los menús que se cierran cuando se presiona el mouse fuera del menú permanecen abiertos al inspeccionarlos en Chrome (y se cierran al inspeccionarlos con Firebug ). Entonces, el consejo es tratar de usar una herramienta de desarrollo diferente en un navegador diferente para ver si hace la diferencia.

El panel de estilo en Firebug tiene un menú desplegable en el que puedes elegir el estado :active o :hover .

Esta es una pregunta muy antigua por ahora, pero he encontrado una respuesta que responde directamente a la parte de la pregunta "congelar el navegador".

Control + Alt + B. Esto es "romper en mutar". Lo que significa que cuando estás sobre un elemento con Firebug activado (Control + Shift + C), cuando cambian los atributos HTML, en su lugar llegan a un punto de interrupción, lo que te permite navegar fácilmente para examinar rutas, etc.

La tecla rápida de Firebug para inspeccionar elementos es Ctrl + Shift + C (Windows / Linux).

Vaya aquí para obtener una lista de todos los atajos de teclado de Firebug .

Para eventos de Javascript como Mouse over .

Abre Firebug / Inspecciona un elemento.
Haga clic en el elemento antes del evento mouseover, por ejemplo, haga clic en un div. Se pondrá azul para mostrar que está seleccionado.
Coloque el mouse sobre el elemento y no lo mueva desde este punto hacia adelante.
Use las teclas de flecha ↑ / ↓ para maniobrar en Firebug.
Use las teclas ← / → para expandir / contraer código con + o -.
Toca dos veces Tab para acceder al panel de CSS.
Use las teclas de flecha para navegar. Use las teclas de desplazamiento y flecha para seleccionar texto. Ctrl y C para copiar.
Mantenga presionada la tecla Mayús y pulse dos veces Tab para volver al panel HTML.

Para la información sobre herramientas de UI de Jquery finalmente configuré una gran demora para ocultar el elemento, así que tengo tiempo para inspeccionarlo antes de que se elimine. Por ejemplo, utilicé esto para inspeccionar la información sobre herramientas:

$( document ).tooltip({ hide: {duration: 100000 } });

en lugar de:

$( document ).tooltip();

Para la información sobre herramientas de arranque:

$(document ).tooltip({delay: { show: 0, hide: 100000 }});

Puede insertar un punto de interrupción al inicio del manejador de evento mouseout. Su código no se ejecutará hasta que permita que continúe, y puede usar el inspector DOM y demás mientras se detiene la ejecución.

También puede iniciar el depurador en un temporizador. Ingrese este comando en la consola:

setTimeout(function(){ debugger; }, 10000);

Esto le dará 10 segundos para usar el mouse y hacer que la página se vea como lo desea para inspeccionarla. Cuando se inicia el depurador, la página se congelará, y podrá explorar los elementos en la pestaña de la herramienta de desarrollador, sin que el DOM cambie o responda a ningún evento adicional del mouse.

HTML Tooltip (Firebug)

Seleccione el elemento con el inspector o en el DOM. Vaya a la pestaña "Estilos" en Firebug y haga clic en la flecha pequeña en la pestaña y seleccione ": hover" (también disponible ": active"). El estado permanecerá en "hover" y podrá seleccionar otros elementos para que pasen el cursor.

HTML Tooltip (herramientas de desarrollador de Firefox)

Haga clic en el botón para ver tres casillas de verificación, que puede usar para establecer: flotar, activar y enfocar pseudo-clases para el elemento seleccionado

También se puede acceder a esta función desde el menú emergente en la vista HTML.

Si configura una de estas pseudo-clases para un nodo, aparece un punto naranja en la vista de marcado junto a todos los nodos a los que se ha aplicado la pseudo-clase:

JQuery Tooltip

Abra la consola e ingrese jQuery(''.css-class'').trigger(''mouseover'')

Información general sobre herramientas de Javascript

Abra la consola e ingrese document.getElementById(''yourId'').dispatchEvent(new Event(''mouseover''));