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

Question

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

Answer 1

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

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

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

*MDN docs for setInerval()

Answer 2

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

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

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

Answer 3

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

在旁注中，console.log()是alert()的稍微更好的选择，因为它允许格式化输出。