如何检查失去焦点后从DOM中消失的html元素？

137

我正在尝试从表单元格的输入检查CSS属性。输入会在单击时显示，而在失去焦点时消失，就像我尝试检查时一样。当我移到另一个窗口（检查器）时，如何做才能不失去焦点？

html css dom

— 罗杰里奥·特里维尼奥（RogelioTriviño）
source

2

可能的重复如何检查只存在当鼠标处于特定位置的元素

— 乔纳森

3

并非如此，此问题的解决方案在这里不合适

— RogelioTriviño2015年

1

该解决方案非常适合

— Jonathan

2

这个答案还解决了其他问题，这是我的第一次尝试，但是在这种情况下，当您从浏览器更改为“ Chrome开发者工具”窗口时，：focus状态会丢失，并且所需的检查项也会消失。我说的是DOM元素，这些元素在单击时出现，而在失去焦点时消失。

— RogelioTriviño2015年

144

在Chrome浏览器中，打开开发人员工具，然后选择元素选项卡，然后打开要检查的元素的父节点的上下文菜单，在上下文菜单中，单击中断 >子树修改。

之后，您只需要单击页面，就可以进入检查器，而不会失去焦点或丢失要检查的元素。

— 罗杰里奥·特里维尼奥（RogelioTriviño）
source

5

FF也有办法吗？

— 花花公子

2

谢谢，经过数小时的努力，我得到了这个解决方案，并决定在这里写下问题和解决方案，随着时间的流逝，这是我在这里声望的主要来源，你知道，我没有时间回答诸如“你怎么能2 + 2在Java上？”

— RogelioTriviño19年

如何找到要检查的元素的父节点？我单击了按钮，以在检查器中打开该元素，但是该弹出窗口在DOM中显然无关。

— 迈克尔

是的，有时javascript会直接在正文或相关的顶级DOM元素下创建新元素。如果您的代码没问题，那么您必须知道您的JavaScript在哪里创建事物，如果不是，那么也许您必须中断BODY子树修改并检查开发工具在哪里确切地在创建新的dom元素（不必是直接的）。家长）

— RogelioTriviño

对于那些对上下文菜单感到困惑的人，它是dom节点最左侧的三点菜单。

— palreddot

92

如果在不移动鼠标的情况下使用键盘快捷键暂停JavaScript执行，则可以捕获消失的元素。在Chrome中执行此操作的方法如下：

打开开发人员工具，然后转到“源代码”。
请注意暂停脚本执行的快捷方式F8。
与UI交互以显示元素。
打F8。
无论如何，如何移动鼠标，检查DOM。该元素将保留在那里。

这个技巧在Firefox和其他现代浏览器中也适用。

— xx
source

12

这对很多事情来说都非常有用-但某些脚本仍会在锁定调试器之前触发。例如，我的自动完成选择框会在脚本暂停之前隐藏所有选择，这使得交互式调整样式非常困难。

— 米尔

不幸的是，这是一个仅适用于Chrome的提示，但是解决了我自己尝试的原因。

— webwake

1

@webwake，是的，这个特定的示例在Chrome中，但是大多数现代浏览器都允许您使用键盘快捷键暂停脚本执行。

— mxxk

这很完美，很简单！注意：暂停Mac版Chrome上的脚本执行是`⌘+`。

— 乔丹·格雷

1

很高兴听到@JordanGray。您是说- ⌘反斜杠吗？对我来说，它既说得好又有用F8。

— mxxk

73

如果其他所有方法均失败，请在控制台中键入以下内容：

setTimeout(() => { debugger; }, 5000)

然后，您有5秒钟的时间（或将值更改为其他任何值）使要调试的内容出现。

其他答案都不为我工作- DOM树不断得到修改（即我所关心的消失的东西），右脚本暂停之前。

— 尼克·法里纳（Nick Farina）
source

7

这个解决方案很hacky，但实际上可以完成工作！谢谢！

— Manjar

1

它们都是最可靠的简单解决方案。

— 詹姆斯

13

不确定这是否适合您的情况，但是通常在Chrome开发者工具中您可以模拟元素状态，通常情况下（在每种情况下都值得一提，因为它是一个很棒的工具）:focus。

为此，请转到Elements开发人员工具中的标签，并确保您位于Styles右侧的区域中（启动开发人员工具时，该位置应为默认位置）。现在，在右上角的样式之间，您将有一个图标Toggle Element State。当你点击它，你可以模拟:active，:hover，:focus和:visited为元素你在代码视图左侧选择。

在此处输入图片说明

— 邓巴F.
source

3

这个答案还解决了其他问题，这是我的第一次尝试，但是在这种情况下，当您从浏览器更改为Chrome开发者工具窗口时，：focus状态丢失了

— RogelioTriviño2015年

9

在Chrome中，位于待测试页面的开发者工具页面上...单击选项菜单，然后打开首选项设置...在DevTools下，启用“模拟重点页面”

然后在测试页面中使元素出现。这样可以使我的弹出式搜索结果始终集中在屏幕上，以便我可以使用它。

— 用户名
source

8

这不是真正的解决方案，但通常可以正常使用（：

关注元素
右键单击上下文菜单
移至开发人员工具

— 德米特里·维普里申科（Dmitry Vyprichenko）
source

1

截至2020年1月仍可在Chrome上运行，谢谢！不错的解决方法

— manroe

2

我遇到了一个非常困难的情况，从这里开始没有答案（我没有验证答案是否更改了容器，这对我来说是身体，还是原始事件，因为我不知道）。我终于找到了解决方法，方法是通过Chrome Inspector中的Control Event Listener Breakpoints中断。也许这也是跨浏览器打破复杂情况的一种方式，即使是F8或右键单击鼠标也会再次隐藏弹出窗口：

— 简
source

1

将以下Javascript粘贴到浏览器开发者控制台中：

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

— 教育
source

0

我的修复速度较快，因为我对工具的使用不太好，这就是我的工作。

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

— Himanshu裤子
source

-1

如果您打开Chrome DevTools，然后使用键盘快捷键触发元素检查器，它应该可以解决问题。

Mac： Cmd+Opt+J然后Cmd+Opt+C

Windows： Ctrl+Shift+J然后Ctrl+Shift+C

[

— applemonkey496
source