Depuración de eventos de Focus con las herramientas de desarrollo de Chrome? No se puede devolver el foco después del punto de ruptura

Question

Estoy intentando depurar un evento JavaScript enfocado adjunto a un grupo de cuadros de texto en una página. El error ocurre al seleccionar un cuadro de texto y luego tabular al siguiente cuadro de texto. Estoy intentando depurar esto colocando un punto de interrupción en el evento onFocus usando las herramientas de desarrollo de Chrome. El problema al que me enfrento es que cuando selecciono un cuadro de texto y se captura el punto de interrupción, Chrome Dev Tools roba el foco y no lo devuelve, por lo que no puedo tabular el siguiente cuadro de texto. Alguien tiene una idea para un trabajo alrededor? Supongo que puedo recurrir a las declaraciones de alerta para imprimir toda la información que necesito sin usar las herramientas de desarrollo de Chrome ......

Answer 1

Tienes razón, las DevTools de Chrome reciben el foco y no las restauran cuando vuelves al página depurada Siéntase libre de presentar un error al http://new.crbug.com (asegúrese de comenzar el resumen con "DevTools:" para que el error se pueda asignar al equipo apropiado lo más rápido posible)

En una nota al margen, console.log() es un poco mejor alternativa a alert(), ya que permite una salida formateada.

Answer 2

Una opción para la depuración de casos difíciles es establecer un intervalo para sondear el foco en la consola.

setInterval(function() {console.log($(':focus')); }, 1000); 

Tipo de esto en la consola (actualizarlo para incluir cualquier información que interesa), pulsa enter, y luego mantener la consola en la que se puede ver mientras haces cosas en su interfaz de usuario.

*MDN docs for setInerval()

Answer 3

Chrome Dev Tools incluye un botón de reproducción/pausa, tanto en el Inspector y como una superposición a la página web. El uso de la superposición evita que el foco llegue al Inspector.

Además, he encontrado el siguiente tipo de solución de registro a ser más fácil de seguir que el método de intervalo (gracias a menos redundancia y la capacidad de recoger en los cambios que se producen más rápidamente que el intervalo):

$('*').on('focus blur', function(event) {console.log(event.type + " to:"); console.log(document.activeElement);});