我怎么能检查html元素，从DOM消失失去焦点?

在Chrome浏览器中，打开开发人员工具，选择元素标签，然后 打开你想要检查的元素的父节点的上下文菜单，在上下文菜单中单击打破在 > 子树的修改.

之后，你只需要点击页面，你就会进入检查器，而不会失去焦点或失去你想要检查的元素。

不确定这是否在你的情况下工作，但通常(在任何情况下都值得一提，因为这是一个伟大的工具)在Chrome开发工具，你可以模拟元素的状态和一个也是:focus。

要做到这一点，请转到开发人员工具中的Elements选项卡，并确保你在右边的Styles部分(这应该是启动开发人员工具时的默认位置)。现在在右上角的样式下面，你有一个图标Toggle Element State。当你点击它，你可以模拟:active， :hover， :focus和:visited的元素你选择在你的代码视图左边。

如果使用键盘快捷键暂停JavaScript执行而不移动鼠标，则可以捕获正在消失的元素。以下是在Chrome中如何做到这一点:

1. 打开开发人员工具，进入源代码。

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

   

3. 与UI交互以使元素出现。

4. < p > F8。

5. 现在你可以移动你的鼠标，检查DOM，等等。元素会留在那里。

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

不是一个真正的解决方案，但它通常工作(:

1. 聚焦元素
2. 右击上下文菜单
3. 转到开发人员工具

将以下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);

如果所有这些都失败了，在控制台中输入以下内容:

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

然后，您有5秒钟的时间(或将值更改为其他任何值)来显示您想要调试的任何内容。

其他的答案都不适合我- DOM树不断被修改(即我关心的东西消失了)正确的在脚本暂停之前。

在Chrome的开发人员工具页面上测试的页面…点击选项菜单，打开设置选项…在DevTools下启用“模拟焦点页面”

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

我有一个更快的解决办法，因为我不太擅长使用工具，这是我所做的。

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

我遇到了一个非常困难的情况，这里没有答案(我没有验证改变容器的答案，这是我的主体，或原始事件，因为我不知道)。我终于找到了一个解决办法，通过控制事件监听断点在Chrome检查器。也许这也是一种跨浏览器的方式打破复杂的情况下，甚至F8或右键单击鼠标隐藏弹出再次:

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

麦克: Cmd+Opt+J，然后Cmd+Opt+C

窗口: Ctrl+Shift+J，然后Ctrl+Shift+C

(< img src = " https://i.stack.imgur.com/Xn1bA.png " alt = " 1] " >

在chrome devtools设置中，有一个名为Emulate a focused page的选项，默认情况下是禁用的。启用此选项后，如果您单击devtool窗口上的任何位置，都不会导致DOM中的任何元素失去焦点。

更新(Chrome版本>= 86):

chrome 86更新后，此选项已移动到Rendering选项卡。打开devtools，然后按Command+Shift+P (Mac)或Control+Shift+P (Windows, Linux)打开命令菜单。开始在命令菜单中输入Rendering并选择Show Rendering。在那里你可以启用Emulate a focused page。

在此之后，只需单击任何元素来聚焦，然后单击devtool窗口上的任何地方。你会看到那个元素并没有失去焦点。所以现在您可以轻松地检查或调试。

(Chrome版本<86)

转到devtool settings -> preferences，在Global选项下，启用Emulate a focused page。

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