Question

我在Chrome版本41.0.2272.101 m（最新版本）上，此更新搞砸了。当你打开检查器时，他们会说，任何DOM更改都会在更改的元素上闪烁紫色（就像在Firefox中一样），但是现在我无法检查任何悬停的物体（也像在FF中一样，这就是为什么我没有＆＃39;在做前端开发时喜欢使用它。）

我正在谈论js触发事件，例如superfish。之前，我可以将鼠标悬停在菜单上，并使用检查器覆盖菜单，菜单将保持打开状态，我可以在检查器中查看创建的伪元素，直接更改填充等，并查看更改。现在，当我将鼠标悬停在菜单上并右键单击以检查它时，菜单关闭，我无法检查它！

我试过拖过检查员，但没有任何帮助。这个新功能＆＃39;很烦人的地狱。有没有办法检查js触发的事件，而不在元素上放置断点（哪个有效，但在屁股上有点痛苦）？

Answer 1

用鼠标将鼠标悬停在元素上并按F8（这仅适用于Chrome）暂停脚本执行。悬停状态将保持对您可见。如果您使用的是Mac，则可能需要打开系统压力并选中“全部使用F1，F2等”复选框。

Answer 2

根据菜单元素类型，我遇到了下拉输入菜单的问题。我检查它的原因是消失是因为当我点击元素外的任何地方时，总是在元素上触发blur事件。

我能够检查元素的一种方法是通过删除模糊事件监听器来防止触发模糊事件：

删除模糊事件后，现在您可以打开菜单并检查它而不会消失

Answer 3

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

Answer 4

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

在 Chrome 86 及更高版本中，您可以在此处找到“模拟焦点页面”选项：

DevTools >> Elements >> "Kebab" 菜单（设置齿轮的 3 个垂直点）>> More tools >> Rendering。

或者：在 Devtools 打开的情况下：按 CTRL/CMD+SHIFT P 打开命令菜单 HUD，输入“emulate a fo”以缩小搜索结果，然后输入（或单击）以切换设置。

Answer 5

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

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

Answer 6

在Firefox中

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

中断...>修改子树

这将在下拉列表...暂停...暂停时暂停执行。

Answer 7

我认为您可以使用Chrome中的CSS编辑器来应用状态，例如，＆＃39; hover＆＃39;。

在“开发人员工具”中，选择一个元素。在右手边，你有一个带箭头的正方形。单击它，您可以选择一个州。例如，选择悬停，您将看到您的窗口和CSS更新，就好像该元素正在暂停。

Answer 8

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

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

步骤是：

这是一个演示：

Answer 9

在Chrome中，如果您单击F12打开开发者控制台，然后单击设置 Dev tools settings

最后检查“模拟重点页面” Check Emulate a Focused Page Option

Answer 10

更改元素窗口中的HTML

将鼠标悬停在检查模式下要保持打开的菜单。
观察元素窗口中元素的HTML更改在菜单的打开/关闭状态之间。大部分时间这都是风格变化。
当您找到使菜单打开和关闭的原因时（在此示例中，在菜单状态之间添加和删除名为“dropdownOpen”的类），元素中的HTML上的双击 标签并进行必要的更改。在此示例中，我们将“dropdownOpen”类添加到<li>元素。

在控制台窗口中使用jQuery

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

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

Answer 11

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

Answer 12

对我有用的唯一方法是在控制台中执行 setTimeout(() => { debugger }, 3000) 并在超时运行时打开下拉列表。

在开发工具 UI 中按暂停按钮或按 F8 键暂停脚本执行都会关闭菜单。