如何在失去焦点的情况下检查从DOM中消失的html元素？

Question

我试图将输入中的CSS属性检查到表格单元格中。输入会在点击时出现，并在失去焦点时消失，就像我尝试检查时一样。 当我移动到另一个窗口（检查员）时，我该怎么做才能失去焦点？

Answer 1

在Chrome浏览器中，打开开发人员工具，然后选择元素标签 打开要检查的元素的父节点的上下文菜单，在上下文菜单中单击 Break on ＆gt; 子树修改。

之后你只需要点击页面就可以使用检查员，而不会失去焦点或丢失想要检查的元素。

Answer 2

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

1. 打开开发人员工具并转到“来源”。

2. 请注意暂停脚本执行的快捷方式 - F8 。

   

3. 与UI交互以显示元素。

4. 点击 F8 。
5. 如何移动鼠标，检查DOM等等。该元素将留在那里。

此技巧也适用于Firefox和其他现代浏览器。

Answer 3

如果所有其他方法都失败了，请在控制台中输入：

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

然后你有5秒（或将值更改为其他任何东西）以显示你想要调试的任何内容。

其他答案都没有对我有用 - 在脚本暂停之前，DOM树一直被修改（即我关心的东西消失了）正确。

Answer 4

在chrome devtools设置中，有一个名为'pages.apps.PagesConfig' 的选项。默认情况下禁用。启用此选项后，如果在devtool窗口上单击任何位置，都不会导致对DOM中任何元素的关注。

因此，只需转到Emulate a focused page，然后在devtool settings -> preferences选项下启用Global。之后，只需单击element使其焦点，然后在devtool窗口上的任意位置单击即可。您会看到该元素不会失去焦点。因此，现在您可以轻松地进行检查或调试。

更新：

Chrome 86更新后，此选项已移至Emulate a focused page标签。它在Rendering中不再可用。按settings（Mac）或Command+Shift+P（Windows，Linux）打开命令菜单。开始在命令菜单中输入Control+Shift+P，然后选择Rendering。在那里您可以启用Show Rendering。

Answer 5

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

要执行此操作，请转到开发人员工具中的Elements标签，并确保您位于右侧的Styles部分（这应该是启动开发人员工具时的默认位置）。现在只需右上角的样式即可获得一个图标Toggle Element State。点击它后，您可以在代码视图中为左侧选中的元素模拟:active，:hover， :focus 和:visited。

Answer 6

不是真正的解决方案，但通常有效（：

1. 关注元素
2. 右键单击上下文菜单
3. 下移到开发者工具

Answer 7

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

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

Answer 8

在浏览器开发者控制台中粘贴以下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);

Answer 9

在 chrome devtools 中单击元素右侧;-)

Answer 10

由于我对使用工具不太满意，因此我可以更快地解决问题，这就是我的工作。

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

Answer 11

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

Answer 12

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

Mac：：先Cmd+Opt+J，然后再Cmd+Opt+C

Windows：：先Ctrl+Shift+J，然后再Ctrl+Shift+C

[