使用开发人员工具模拟JavaScript事件？

Question

Chrome（和Firefox）都有非常棒的工具来更改元素的当前状态，例如将其设置为悬停状态，以便您可以检查/修改css：

问题是这似乎没有引发任何JavaScript事件。

我正在尝试设置工具提示的样式，该工具提示会在悬停时显示。当我将鼠标从所述元素上移开时将工具提示消失，并且将状态设置为悬停在开发人员工具中似乎并未触发jQuery事件，因此很难手动将鼠标悬停在元素上。

我不得不求助于在开发人员工具检查器中的元素上添加ID，然后在控制台中执行以下操作：

$("#custom-element-hover").mouseover();

感觉不对（并且有点麻烦）。

有没有更好的方法可以做到这一点，我不知道？

Answer 1

在一个简单的情况下，我认为通常更容易使用控制台。但在开发人员工具中，您还可以找到事件侦听器代码并在其上设置断点：

然后右键单击此处理程序并执行查看源代码，使用{}按钮取消最小化源代码并在此处理程序函数中设置断点。

如果此处理程序函数在不相关的事件上触发，那么您可能需要右键单击它并使断点成为条件或添加监视表达式以查看您何时处于正确的事件。

您也可以使用相同的断点设置方法来跳过特定的mouseout事件。

Answer 2

我可以分享我在这种情况下所做的事情。我在chrome调试器中打开元素选项卡，然后右键单击目标元素。然后我选择＆＃34;复制CSS路径＆＃34;

如果你这样做，你会得到类似的东西

#mdhelp-tabs > li:nth-child(1)

这个字符串实际上可以用作jQuery的legimit选择器。所以这个

$("#mdhelp-tabs > li:nth-child(1)")

将为jquery对象提供dom的目标元素。

因此，您不必为要处理的每个元素分配ID。

Answer 3

我不确定但您可以使用控制台来处理工具提示