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

Posted 2023-03-06

【中文标题】Firebug：如何检查随鼠标移动而变化的元素？

【英文标题】：Firebug: How to inspect elements changing with mouse movements?

【发布时间】：2010-12-13 02:56:13

【问题描述】：

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

基本上我正在寻找的东西可以：

在不移动鼠标的情况下切换到 firebug 控制台（可能使用键盘快捷键？但我不知道如何仅通过键盘使用 firebug） 能够“冻结”页面，这样您的鼠标移动就不会再触发任何事件。

谢谢。

【参考方案1】：

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

【讨论】：

如果 JS 太复杂搞不清楚在哪里触发了怎么办？

然后你启动萤火虫探查器，触发鼠标悬停，停止探查器并尝试缩小触发事件处理程序的位置

安装FireQuery插件，你会得到带有html的Handler，点击它你会得到一个事件的函数。

【参考方案2】：

我认为你也可以这样做：

选择 Firebugs 检查模式

将鼠标悬停在弹出您要检查的元素的项目上，然后多次使用 Tab 键使 Firebug 处于活动状态（我发现很难看到 Firebug 何时处于活动状态组件，但没有像反复试验那样 - 当我看到 Firefoxes Find Toolbar 处于活动状态时，我会 Shift + Tab 向后退两次以进入 Firebug。

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

无论如何都为我工作！

【讨论】：

感谢 TAB 提示，这正是我想要的。只是它仍然不完美，我无法使用键盘在 firebug 选项卡之间切换，也无法编辑 css 属性和东西。我猜萤火虫只是没有很好的键盘导航。

如果页面上有表单，随着滚动位置的变化，这将不起作用。

【参考方案3】：

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').trigger('mouseover')，无需破解任何东西。

【参考方案4】：

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

【参考方案5】：

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

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

代替：

    $( document ).tooltip();

【参考方案6】：

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

【讨论】：

同意。当您需要编辑悬停菜单时，Chrome 比 Firebug 更有用。

【参考方案7】：

Firebug 检查元素的热键是 Ctrl + Shift + C (Windows/Linux)。

去这里查看所有Firebug keyboard shortcuts的列表。

【参考方案8】：

对于引导工具提示：

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

【参考方案9】：

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

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

【参考方案10】：

用于 Javascript 事件，例如 鼠标悬停。

打开 Firebug/检查一个元素。 在鼠标悬停事件之前单击元素，例如点击一个div。它会变成蓝色以表明它已被选中。 将您的鼠标放在元素上，然后不要移动从现在开始。 使用您的 ↑/↓ 箭头键在 Firebug 中进行操作。 使用您的 ←/→ 箭头键通过 + 或 - 扩展/收缩代码。 双击 Tab进入CSS面板。 使用箭头键导航。使用 shift 和箭头键选择文本。 Ctrl & C 复制。 按住 Shift和双击 Tab返回HTML窗格。

【参考方案11】：

打开控制台：

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

$('your selector') 

在上面写上 javascript 然后按回车。您将拥有元素列表。

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

$('your selector').mouseenter() 

按回车键。

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

【参考方案12】：

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

Control + Alt + B。这是“突变中断”。这意味着，当您将鼠标悬停在使用 firebug 的元素上时（Control + Shift + C），当 HTML 属性发生更改时，它们会遇到断点，从而使您可以轻松导航以检查路径等。

【参考方案13】：

您还可以在计时器上启动调试器。在控制台输入这个命令：

setTimeout(function() debugger; , 10000);

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

【讨论】：

4 年后，通过控制台手动调用调试器似乎仍然是在 Firefox 中冻结 DOM 的唯一方法，同时仍然允许您访问检查元素功能。