Debugging onFocus event using Chrome Developer Tools? Can't return focus after break point

busoni34 picture busoni34 · Jan 23, 2012 · Viewed 14.2k times · Source

I'm trying to debug a JavaScript onFocus event attached to a bunch of text boxes on a page. The bug occurs when selecting a text box and then tabbing to the next text box. I'm trying to debug this by placing a break point in the onFocus event using the Chrome Developer Tools. The problem I'm facing is that when I select a text box and the break point is caught, Chrome Developer Tools steals focus and does not return it, so I can't tab to the next text box. Anyone have an idea for a work around? I guess I can resort to alert statements to print all of the information I need without using Chrome Developer Tools......

Answer

aminimalanimal picture aminimalanimal · Jun 15, 2015

Chrome Dev Tools includes a Play/Pause button both in the Inspector and as an overlay to the webpage. Using the overlay prevents focus from landing on the Inspector.

Also, I've found the following type of logging solution to be easier to track than the interval method (thanks to less redundancy and the ability to pick up on changes that occur more rapidly than the interval):

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