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

Question

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

基本上我正在寻找能够：

的东西

• 切换到firebug控制台而不移动鼠标（可能使用键盘快捷键？但我无法弄清楚如何仅使用键盘使用firebug）
• 能够“冻结”页面，以便鼠标移动不再触发任何事件。

感谢。

Answer 1

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

Answer 2

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

Answer 3

我认为你也可以这样做：

• 选择Firebugs Inspect模式

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

  < / LI>

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

无论如何为我工作！

Answer 4

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

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

而不是：

    $( document ).tooltip();

Answer 5

您可以在mouseout事件处理程序的开头插入断点。只有在允许它继续之后才会执行它的代码，并且可以在执行停止时使用DOM检查器等等。

Answer 6

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

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

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

Answer 7

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

到此处查看所有Firebug keyboard shortcuts的列表。

Answer 8

对于bootstrap工具提示：

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

Answer 9

虽然如果您只想检查一些CSS代码，在CSS菜单中选择:hover可能会很好，但如果您想要检查的内容是使用JavaScript更改的话，它就不起作用。

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

Answer 10

Javascript 事件，例如鼠标悬停。

1. 打开Firebug /检查元素。
2. 点击鼠标悬停事件前的元素，例如点击div。它将变为蓝色以显示它已被选中。
3. 将鼠标放在元素上，然后不要移动。
4. 使用↑ / ↓箭头键在Firebug中进行操作。
5. 使用← / →箭头键以+或 - 扩展/收缩代码。
6. 点按两次 标签即可转到CSS窗格。
7. 使用箭头键进行导航。使用 shift 和箭头键选择文本。 Ctrl ＆amp; C 要复制。
8. 按住 Shift 和双击 标签返回HTML窗格。

Answer 11

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

Answer 12

打开控制台：

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

$('your selector') 

在javascript上面写，然后按回车键。你将有元素列表。

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

$('your selector').mouseenter() 

按Enter键。

这样您就可以在没有实际鼠标的情况下模拟鼠标移动事件。并且可以使用实际的鼠标指针来调试调试工具中的东西。

Answer 13

这是一个非常古老的问题，但是我已经找到了一个直接回答＆＃34;冻结浏览器的答案＆＃34;部分问题。

Control + Alt + B.这是＆＃34;突然变异＆＃34;。这意味着，当你将一个元素悬停在一个带有firebug的元素上时（Control + Shift + C），当HTML属性发生变化时，它们会触及一个断点，让你轻松导航以检查路径等。