Debugging weird focus behavior in browser

Hi folks

Recently I was working with a task to fix a weird focus behavior. On a certain action, current input element was losing focus and some other input element gained the focus.

I spent a lot of time trying to understand why is that happened. There are a lot of ways to set breakpoint to the focus/blur event but this would not help to understand WHY that happened at first place.

Finally, I’ve got an idea to set a breakpoint on myElement.focus() function

window._focus = myElement.focus;
myElement.focus = function() { debugger; window._focus.apply(this, arguments); }

In case if I need to debug focus for all elements I use

window._focus = HTMLElement.prototype.focus;
HTMLElement.prototype.focus = function() { debugger; window._focus.apply(this, arguments); }

This helped me to set a breakpoint and I from the stack trace I could finally find the code which was calling the focus on that random element and I’ve managed to fix the issue.

I think such approach could be used to set a breakpoint to any native function.

Please stay tuned.

Advertisements

About mnaoumov

Senior .NET Developer in Readify
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s