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

【问题标题】：Debugging onFocus event using Chrome Developer Tools? Can't return focus after break point使用 Chrome 开发者工具调试 onFocus 事件？断点后无法返回焦点
【发布时间】：2012-02-17 04:20:07
【问题描述】：

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

【问题讨论】：

标签： javascript google-chrome-devtools dom-events onfocus

【解决方案1】：

您是对的，Chrome DevTools 会在您切换回调试页面时获得焦点并且不会恢复它。请随时在http://new.crbug.com 提交错误（确保以“DevTools：”开头的摘要，以便可以尽快将错误分配给适当的团队。）

附带说明，console.log() 比alert() 稍微好一些，因为它允许格式化输出。

【讨论】：

【解决方案2】：

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

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

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

*MDN docs for setInerval()

【讨论】：

另请参阅 [stackoverflow.com/questions/11277989/…，了解访问重点内容的不同方式（包括非 jQuery）。
今天帮助了我:)。我已将它放在书签中，以供将来参考和快速访问。
如果不使用 jquery：setInterval(function() {console.log(document.activeElement); }, 1000);

【解决方案3】：

Chrome 开发工具在 Inspector 和网页上都包含一个播放/暂停按钮。使用覆盖可防止焦点落在 Inspector 上。

另外，我发现以下类型的日志记录解决方案比间隔方法更容易跟踪（这要归功于更少的冗余以及能够比间隔更快地发现发生的变化）：

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

【讨论】：

这是更好的解决方案，因为它只在更改时记录，而不是在使用 setInterval 时向控制台发送垃圾邮件