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

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

基本上，我正在寻找可以实现以下目的的东西：

• 在不移动鼠标的情况下切换到Firebug控制台（也许使用键盘快捷键？但是我不知道如何仅在键盘上使用Firebug）
• 具有“冻结”页面的功能，因此您的鼠标移动不再触发任何事件。

谢谢。

我想您也可以这样做：

• 选择萤火虫检查模式

• 将鼠标悬停在弹出您要检查的元素的项目上，然后Tab多次使用该键使Firebug处于活动状态（我很难看清Firebug何时是活动组件，但没有试过的错误-当我看到Firefox查找时工具栏处于活动状态，然后我会向后Shift+Tab两次以进入Firebug。

• 然后，我将使用L / R箭头键收缩/扩展元素，并使用U / D箭头键浏览Firebugs控制台。

反正为我工作！

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'));

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

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

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

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

对于Jquery UI工具提示，我最终为隐藏元素设置了较长的延迟，因此我有时间在删除元素之前对其进行检查。例如，我用它来检查工具提示：

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

代替：

    $( document ).tooltip();

您可以在mouseout事件处理程序的开始处插入一个断点。在您允许其继续执行之前，它的代码将不会执行，并且您可以在执行停止时使用DOM检查器等。

Firebug用于检查元素的热键是Ctrl+ Shift+ C（Windows / Linux）。

在此处获取所有Firebug键盘快捷键的列表。

对于引导工具提示：

$(document ).tooltip({delay: { show: 0, hide: 100000 }});

选择时 :hover如果只想检查一些CSS代码，则在CSS菜单中进行可能会很好，但是如果要检查的内容是使用JavaScript更改的，则无法使用。

在这种情况下，一个简单的技巧是在不同的窗口（Firebug栏的右上角）中打开Firebug，而不是将鼠标移到所需位置并将某些东西从浏览器窗口中拖放出来。现在，您可以在Firebug窗口中检查任何内容。只是不要将鼠标移回浏览器窗口。

对于Javascript事件，例如Mouse over。

1. 打开Firebug /检查元素。
2. 单击鼠标悬停事件之前的元素，例如，单击div。它将变成蓝色，表明已被选中。
3. 将鼠标放在该元素上，不要从现在开始移动它。
4. 使用↑/↓箭头键在Firebug中进行操作。
5. 使用←/→箭头键使用+或-展开/收缩代码。
6. 双击 Tab以进入CSS窗格。
7. 使用箭头键进行导航。使用shift和箭头键选择文本。 Ctrl＆C复制。
8. 按住 Shift并双击 Tab以返回到HTML窗格。

我发现Chrome的工作方式与Firefox有所不同。特别是，当在Chrome中检查鼠标时，在菜单外单击鼠标会关闭的菜单保持打开状态（使用Firebug检查时将关闭）。因此，建议是尝试在不同的浏览器中使用不同的开发工具，以查看是否有所作为。

打开控制台：

如果您有基于javascript的工具提示，请使用适当的选择器在控制台中找到适用的元素。如下所示，并确认您能够使用选择器找到合适的元素。

$('your selector') 

编写以上javascript并按Enter。您将拥有元素列表。

现在，例如，如果库在mouseenter上添加了事件，请输入以下脚本：

$('your selector').mouseenter() 

按回车。

这样，您可以模拟鼠标移动事件而无需实际的鼠标。并可以使用实际的鼠标指针在调试器工具中进行调查。

到目前为止，这是一个非常老的问题，但是我找到了一个答案，可以直接回答该问题的“冻结浏览器”部分。

Ctrl + Alt +B。这是“突变突变”。这意味着，当您将鼠标悬停在启用了萤火虫的元素上（Control + Shift + C）时，当HTML属性发生变化时，它们会碰到一个断点，从而使您可以轻松地四处浏览以检查路径等。