我试图检查CSS属性从输入到表格单元格。输入在点击时出现,在失去焦点时消失,就像我试图检查它一样。 当我移动到另一个窗口(检查器)时,我如何做到不失去焦点?
当前回答
如果暂停JavaScript执行而不移动鼠标,则可以捕获正在消失的元素。可以使用键盘快捷键或触发调试器语句。这适用于外观由JavaScript控制的元素,而不是CSS:hover(如果是CSS,请参阅Dumba F。的回答)。
键盘快捷键
这种方法适用于不使用JS在按键时触发特殊行为的页面。这些说明是谷歌Chrome,但可以适应其他现代浏览器:
打开开发人员工具并进入源代码。 注意暂停脚本执行的快捷方式- f8(根据您的操作系统,可能还有其他快捷方式)。 与UI交互以显示元素。 按下F8。 现在你可以移动鼠标,检查DOM,等等。元素会留在那里。
调试器的声明
要触发一个调试器语句,当悬浮元素可见时执行,使用setTimeout:
打开JS控制台,输入: //暂停脚本执行5秒 setTimeout(() =>{调试器;}, 5000) 使悬停打开并等待脚本执行暂停。
(与尼克·法里纳的回答相同)
其他回答
我有一个更快的解决办法,因为我不太擅长使用工具,这是我所做的。
event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();
在Chrome的开发人员工具页面上测试的页面…点击选项菜单,打开设置选项…在DevTools下启用“模拟焦点页面”
然后在测试页面中显示元素。这可以让我的弹出式搜索结果集中在屏幕上,这样我就可以使用它。
如果所有这些都失败了,在控制台中输入以下内容:
setTimeout(() => { debugger; }, 5000)
然后,您有5秒钟的时间(或将值更改为其他任何值)来显示您想要调试的任何内容。
其他的答案都对我不起作用——DOM树在脚本暂停之前一直被修改(即我关心的东西消失了)。
不是一个真正的解决方案,但它通常是有效的。
聚焦元素 右击上下文菜单 转到开发人员工具
在chrome devtools中单击元素的右侧;-)