使用Chrome开发者工具调试onFocus事件?断点后无法返回焦点 [英] Debugging onFocus event using Chrome Developer Tools? Can't return focus after break point

问题描述

我正在尝试调试附加在页面上一堆文本框中的JavaScript onFocus 事件.选择一个文本框，然后跳到下一个文本框时，会发生该错误.我正在尝试通过使用Chrome开发者工具在 onFocus 事件中放置一个断点来调试此问题.我面临的问题是，当我选择一个文本框并捕捉到断点时，Chrome开发者工具会抢占焦点并不会返回焦点，因此我无法跳至下一个文本框.有人有变通的想法吗?我想我可以使用警报声明来打印我需要的所有信息，而无需使用Chrome开发者工具...

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

推荐答案

Chrome开发工具在检查器中以及网页的叠加层均包含播放/暂停"按钮.使用覆盖层可以防止焦点落在检查器上.

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.

此外，我发现以下类型的日志记录解决方案比interval方法更易于跟踪(由于冗余少，并且能够接收比间隔更快发生的更改):

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);});

这篇关于使用Chrome开发者工具调试onFocus事件?断点后无法返回焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！