Firebug:如何检查随鼠标移动而变化的元素？

有时,如果将鼠标放在某个区域上,我需要检查仅显示在页面上的元素.问题是,如果您开始将鼠标移向firebug控制台以查看更改,则会触发鼠标移除事件,并且我尝试检查的所有更改都会消失.如何处理此类案件？

基本上我正在寻找能够:

切换到firebug控制台而不移动鼠标(可能使用键盘快捷键？但我无法弄清楚如何仅使用键盘使用firebug)

能够"冻结"页面,使鼠标移动不再触发任何事件.

谢谢.

1> Stefan..：

---

HTML工具提示(Firebug)

使用检查器或DOM选择元素.转到firebug中的"样式"选项卡,然后单击选项卡上的小箭头并选择":hover"(也可用":active").状态将保持"悬停"状态,您可以选择其他元素使其悬停.

HTML工具提示(Firefox开发人员工具)

单击按钮以查看三个复选框,您可以使用这些复选框为所选元素设置:hover,:active和:focus伪类

也可以从HTML视图中的弹出菜单访问此功能.

如果为节点设置其中一个伪类,则在应用伪类的所有节点旁边的标记视图中会出现一个橙色点:

JQuery工具提示

打开控制台并输入 jQuery('.css-class').trigger('mouseover')

常规Javascript工具提示

打开控制台并输入 document.getElementById('yourId').dispatchEvent(new Event('mouseover'));

---

`:hover` firebug css状态不会触发javascript悬停事件.只需使用`jQuery('.css-class').触发器('mouseover')`并且不需要破解任何东西.

---

@serg,所选答案应改为此答案.

---

这就是为什么有时你需要向下滚动接受的答案:)

2> david.s..：

---

Firebug中的样式面板有一个下拉菜单,您可以在其中选择:active或:hover状态.

---

这应该被接受.非常感谢你!:)

3> 小智..：

---

我想你也可以这样做:

选择Firebugs Inspect模式

将鼠标悬停在弹出要检查的元素的项目上,然后Tab多次使用该键使Firebug处于活动状态(我发现当Firebug是活动组件时很难看,但没有像试验和错误那样 - 当我看到Firefoxes查找时工具栏处于活动状态我然后Shift+ Tab两次向后进入Firebug.

然后我使用L/R箭头键来收缩/扩展元素和U/D箭头键来浏览Firebugs控制台

无论如何,为我工作!

---

见Stefan的回答.

4> Ronen Festin..：

---

对于Jquery UI工具提示,我最终为隐藏元素设置了一个很长的延迟,所以我有时间在它被删除之前检查它.例如,我用它来检查工具提示:

    $( document ).tooltip({ hide: {duration: 100000 } });

代替:

    $( document ).tooltip();

5> Casey Plumme..：

---

您也可以按计时器启动调试器。在控制台中输入以下命令：

setTimeout(function(){ debugger; }, 10000);

这将使您有10秒钟的时间使用鼠标，并使页面看起来像您想要检查的样子。当调试器启动时，页面将冻结，您将能够在开发人员工具选项卡中浏览元素，而无需更改DOM或响应任何其他鼠标事件。

6> NickFitz..：

---

您可以在mouseout事件处理程序的开头插入断点.在您允许它继续之前,它的代码不会被执行,并且您可以在执行停止时使用DOM检查器等.

---

如果JS过于复杂以至于无法确定触发位置会怎么样？

---

然后启动firebug探测器,触发鼠标悬停,停止探查器并尝试缩小触发事件处理程序的位置