在新的Chrome中检查下拉菜单

我使用的是Chrome版本41.0.2272.101 m（最新），并且此更新很混乱。他们说，当您打开检查器时，所有DOM更改都会在更改的元素上闪烁紫色（例如Firefox），但是现在我无法检查任何悬停的对象（也像FF中一样），这就是为什么我不喜欢在进行前端开发时使用它）。

我说的是js触发事件，例如superfish。以前，我可以将鼠标悬停在菜单上，并用检查器覆盖菜单，菜单将保持打开状态，然后我可以进入检查器中查看创建了哪些伪元素，直接更改填充等，并查看更改。现在，当我将鼠标悬停在菜单上并右键单击以对其进行检查时，菜单将关闭，而我无法对其进行检查！

我试图拖延检查员，但没有任何帮助。这个新的“功能”令人讨厌。有没有一种方法可以检查js触发的事件，而无需在元素上设置断点（这可以工作，但是有点麻烦）？

用鼠标悬停在元素上，然后按F8键（仅在Chrome中有效）以暂停脚本执行。悬停状态对您仍然可见。如果您使用的是Mac，则可能需要打开系统偏好设置，然后选中“使用所有F1，F2等”复选框（或者简单地使用fn + F8）。

有时，仅当您在检查器的“源”选项卡中时，它才有效。

根据菜单元素类型的不同，我遇到了下拉输入菜单的问题。当我检查它时，它消失了的原因blur是，当我单击元素外部的任何位置时，总是在该元素上触发一个事件。

我能够检查元素的一种方法是防止模糊事件被触发，方法是删除模糊事件侦听器：

• 在Chrome上检查输入元素
• 转到“事件侦听器”选项卡并删除模糊事件

移除模糊事件后，您可以打开菜单并进行检查而不会消失

在Chrome中，按F12打开开发者控制台，然后单击“设置”（齿轮图标）或按F1：

然后找到并选中“模拟重点页面”选项。

在Mac上，您可以在打开下拉菜单后按cmd+\暂停脚本。然后，您可以使用shift+ cmd+c检查元素。

现在，当我将鼠标悬停在菜单上并右键单击以对其进行检查时，菜单将关闭，而我无法对其进行检查！

我遇到了同样的问题，我使用的是chrome开发工具上的“递归扩展”选项：

这些步骤是：

1. 检查下拉字段
2. 查找动态DOM（紫色突出显示）
3. 右键单击该动态DOM
4. 选择递归扩展：
5. 我们可以看到所有元素都在那里

这是一个演示：

您可以设置一个间隔，该间隔每秒钟写出JS控制台中给定元素的内容。将其放在控制台中，然后打开下拉菜单。

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

在Firefox中

在Inspector中，右键单击包含下拉菜单的节点，然后选择：

中断...>修改子树

当下拉列表出现时，这将暂停执行。

我认为您可以在Chrome中使用CSS编辑器来应用状态，例如“悬停”状态。

在开发人员工具中，选择一个元素。在右边，您有一个带有箭头的正方形。单击该按钮，您可以选择一种状态。例如，选择悬停，您将同时看到窗口和CSS更新，就好像元素现在正在悬停一样。

以上提到的补救措施都没有对我有用。由于我们的下拉列表（基于反应）将在单击（右或左）时关闭，因此我们发现了以下解决方法：

• 在Chrome Open开发人员工具中
• 首先单击处于折叠状态的下拉菜单，然后使用选项进行扩展
• 然后在元素部分下，右键单击div节点（确保在单击鼠标右键之前不要左键单击），其中包含下拉菜单项的详细信息
• 然后选择选项“递归扩展”
• 然后显示所需的详细信息

在元素窗口中更改HTML

• 将鼠标悬停在要在检查模式下保持打开状态的菜单上。
• 在菜单的打开/关闭状态之间，观察“元素”窗口中元素上的HTML更改。大多数情况下，这是一种样式更改。
• 当您发现使菜单打开和关闭的原因时（在本示例中，在菜单状态之间添加和删除了一个名为“ dropdownOpen”的类），双击“元素”选项卡中的HTML并进行必要的更改。在此示例中，我们向<li>元素添加了“ dropdownOpen”类。

在控制台窗口中使用jQuery

如果您需要重复此行为，则可以使用jQuery。您可以使用jQuery选择元素，并在控制台中进行必要的更改。在此示例中，我们通过元素ID选择元素，并向其添加“ dropdownOpen”类，如下所示：

jQuery("#menu-item-11012").addClass("dropdownOpen");