使用Chrome开发者工具调试onFocus事件？断点后无法返回焦点

Question

我正在尝试调试附加到页面上一堆文本框的JavaScript onFocus事件.选择文本框然后跳转到下一个文本框时会出现错误.我正在尝试通过使用Chrome开发工具在onFocus事件中放置一个断点来调试此问题.我面临的问题是,当我选择一个文本框并且捕获断点时,Chrome开发工具会窃取焦点并且不会返回它,因此我无法选中下一个文本框.任何人都有想法解决问题？我想我可以使用警报语句打印我需要的所有信息,而无需使用Chrome开发工具......

Answer 1

Chrome开发者工具在Inspector中包含播放/暂停按钮,并作为网页的叠加层.使用叠加可防止焦点落在检查器上.

此外,我发现以下类型的日志记录解决方案比间隔方法更容易跟踪(由于冗余度较低,并且能够获取比间隔更快发生的更改):

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

Answer 2

调试棘手情况的一个选项是设置一个间隔以在控制台中轮询焦点.

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

在控制台中键入此内容(更新它以包含您感兴趣的任何详细信息),按Enter键,然后在您在UI中执行操作时将控制台保持在可以看到它的位置.

*setInerval()的MDN文档

Answer 3

您是对的,Chrome DevTools会在您切换回调试页面时获得焦点并且不会将其恢复.请随意在http://new.crbug.com上提交错误(确保使用"DevTools:"启动摘要,以便尽快将错误分配给相应的团队.)

另一方面,它console.log()是一个稍微好一些的选择,alert()因为它允许格式化输出.