19

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......

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
busoni34
  • 389
  • 1
  • 4
  • 13

4 Answers4

16

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);});
aminimalanimal
  • 417
  • 2
  • 6
  • 13
  • This is the better solution, since it only logs when it changes, instead of spamming the console when using setInterval – Cine Nov 13 '17 at 11:36
13

One option for debugging tricky cases is to set an interval to poll the focus in the console. 

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

Type this in the console (update it to include whatever details you are interested in), hit enter, and then keep the console where you can see it while you do stuff in your UI.

*MDN docs for setInerval()

Malcolm Dwyer
  • 1,145
  • 8
  • 9
  • 1
    See also [http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery](here) for different ways of accessing what's focused (including non-jQuery). – Malcolm Dwyer Feb 24 '14 at 21:16
  • 1
    Helped me out today :). I've stuck it in a bookmarklet for future reference and quick access. – net.uk.sweet Oct 26 '15 at 15:34
  • 3
    If not using jquery: `setInterval(function() {console.log(document.activeElement); }, 1000);` – Mark Woon Oct 14 '17 at 01:29
10

You are right, Chrome DevTools receive focus and do not restore it when you switch back to the debugged page. Feel free to file a bug at http://new.crbug.com (make sure you start the summary with "DevTools: " so that the bug can be assigned to the appropriate team as quickly as possible.)

On a side note, console.log() is a slightly better alternative to alert() as it allows formatted output.

Alexander Pavlov
  • 31,598
  • 5
  • 67
  • 93
0

There's a checkbox in the Rendering tool of Chrome DevTools labelled "Emulate a focused page". This prevents the webpage from getting blur events when you click on DevTools or other windows.

r3m0t
  • 1,850
  • 16
  • 21