在Web应用程序中存在某些情况，其中UI元素会从屏幕上出现/消失，并且对其进行检查很具有挑战性。通常，当元素在DOM中的存在基于focus或hover状态，该状态在您尝试检查时会发生变化。在本文中，我将介绍几种克服这一点的方法。

好的方式

检查在许多情况下可能令人满意的元素的一种简单方法是将setTimeout()与debugger;结合使用来有效冻结DOM，从而使您可以在闲暇时检查任何内容。 debugger;语句（记录为here调用JavaScript调试器并完全暂停执行。当在setTimeout()计时器的回调中使用时，您可以“安排” DOM在获得UI准备后进行检查后冻结。

Here是一个代码框示例，您可以在其中使用此技术。在此示例中，如果您单击<input>，则将出现一个选项菜单。如果我们的目标是检查菜单中的一个选项，那么我们必须与菜单外任何地方单击菜单的任何地方消失的事实。

要测试此解决方案，打开开发人员工具并将以下代码添加到“控制台”选项卡：

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

我们在控制台中提交此命令后，您将有三秒钟的时间打开菜单，然后在执行暂停并冻结DOM之前。

这种方法的一个缺点是dom是完全冷冻的。这意味着，如果我们想做一些选项菜单中的悬停行为之类的事情，我们就无法。