Debug dell'evento onFocus utilizzando gli Strumenti per sviluppatori di Chrome? Impossibile restituire lo stato attivo dopo il punto di interruzione

Question

Sto tentando di eseguire il debug di un evento onFocus JavaScript collegato a un gruppo di caselle di testo su una pagina. Il bug si verifica quando si seleziona una casella di testo e quindi si passa alla successiva casella di testo. Sto cercando di eseguire il debug inserendo un punto di interruzione nell'evento onFocus utilizzando Chrome Dev Tools. Il problema che sto affrontando è che quando seleziono una casella di testo e il punto di interruzione viene catturato, Chrome Dev Tools ruba lo stato attivo e non lo restituisce, quindi non posso passare alla casella di testo successiva. Qualcuno ha un'idea per un lavoro in giro? Immagino di poter ricorrere alle istruzioni di avviso per stampare tutte le informazioni di cui ho bisogno senza utilizzare Chrome Dev Tools ......

Answer 1

Hai ragione, Chrome DevTools riceve lo stato attivo e non ripristinarlo quando torni al pagina di debug. Sentitevi liberi di inviare un bug a http://new.crbug.com (assicuratevi di iniziare la sintesi con "DevTools:". In modo che il bug può essere assegnata al team competente il più rapidamente possibile)

Su un lato nota, console.log() è un po ' migliore alternativa a alert() in quanto consente l'output formattato.

Answer 2

Un'opzione per il debug di casi complicati consiste nell'impostare un intervallo per il polling dello stato attivo nella console.

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

Digitare questo nella console (aggiornarlo per includere tutto ciò che i dettagli che ti interessa), premere invio, e quindi a mantenere la console in cui si può vedere mentre si fa roba nella vostra interfaccia utente.

*MDN docs for setInerval()

Answer 3

Chrome Dev Tools include un pulsante Play/Pause sia in Impostazioni e come una sovrapposizione alla pagina web. L'uso della sovrapposizione impedisce alla messa a fuoco di atterrare su Inspector.

Inoltre, ho trovato il seguente tipo di soluzione registrazione per essere più facile da monitorare rispetto al metodo dell'intervallo (grazie a meno ridondanza e la capacità di raccogliere su cambiamenti che si verificano più rapidamente rispetto all'intervallo):

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