我试图检查CSS属性从输入到表格单元格。输入在点击时出现,在失去焦点时消失,就像我试图检查它一样。 当我移动到另一个窗口(检查器)时,我如何做到不失去焦点?
当前回答
如果暂停JavaScript执行而不移动鼠标,则可以捕获正在消失的元素。可以使用键盘快捷键或触发调试器语句。这适用于外观由JavaScript控制的元素,而不是CSS:hover(如果是CSS,请参阅Dumba F。的回答)。
键盘快捷键
这种方法适用于不使用JS在按键时触发特殊行为的页面。这些说明是谷歌Chrome,但可以适应其他现代浏览器:
打开开发人员工具并进入源代码。 注意暂停脚本执行的快捷方式- f8(根据您的操作系统,可能还有其他快捷方式)。 与UI交互以显示元素。 按下F8。 现在你可以移动鼠标,检查DOM,等等。元素会留在那里。
调试器的声明
要触发一个调试器语句,当悬浮元素可见时执行,使用setTimeout:
打开JS控制台,输入: //暂停脚本执行5秒 setTimeout(() =>{调试器;}, 5000) 使悬停打开并等待脚本执行暂停。
(与尼克·法里纳的回答相同)
其他回答
如果你打开Chrome DevTools,然后使用键盘快捷键触发元素检查器,它应该可以解决这个问题。
Mac: Cmd+Opt+J,然后Cmd+Opt+C
Windows:先按Ctrl+Shift+J,再按Ctrl+Shift+C
[
如果所有这些都失败了,在控制台中输入以下内容:
setTimeout(() => { debugger; }, 5000)
然后,您有5秒钟的时间(或将值更改为其他任何值)来显示您想要调试的任何内容。
其他的答案都对我不起作用——DOM树在脚本暂停之前一直被修改(即我关心的东西消失了)。
我遇到了一个非常困难的情况,这里没有答案(我没有验证改变容器的答案,这是我的主体,或原始事件,因为我不知道)。我终于找到了一个解决办法,通过控制事件监听断点在Chrome检查器。也许这也是一种跨浏览器的方式打破复杂的情况下,甚至F8或右键单击鼠标隐藏弹出再次:
在Chrome浏览器中,打开开发人员工具,然后选择元素选项卡 打开你想要检查的元素的父节点的上下文菜单,在上下文菜单中单击>子树修改上的Break。
之后,你只需要点击页面,你就会进入检查器,而不会失去焦点或失去你想要检查的元素。
不确定这是否在你的情况下工作,但通常(在任何情况下都值得一提,因为这是一个伟大的工具)在Chrome开发工具中,你可以模拟元素的状态,其中一个也是:焦点。
要做到这一点,请转到开发人员工具中的元素选项卡,并确保您在右侧的样式部分(这应该是启动开发人员工具时的默认位置)。现在在右上角的样式下面有一个Toggle Element State图标。当你点击它时,你可以模拟:active,:hover,:focus和:visited在你的代码视图中选择左边的元素。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 我如何使用jQuery按字母顺序排序一个列表?
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?