Firebug:如何检查鼠标移动的元素变化?

有时我需要检查只有在鼠标hover在某个区域时才显示在页面上的元素。 问题是,如果您开始将鼠标移动到萤幕控制台以查看更改,则会触发鼠标移出事件,并且所有正在检查的更改都将消失。 如何处理这种情况?

基本上我正在寻找的东西,要么:

  • 切换到萤火虫控制台没有移动鼠标(使用键盘快捷键可能吗?但我不知道如何使用萤幕与键盘只)
  • 有能力“冻结”页面,使您的鼠标移动不会触发任何事件了。

谢谢。

我想你也可以这样做:

  • selectFirebugs检查模式

  • 将鼠标hover在popup要检查的元素的项目上,然后多次使用Tab键使Firebug处于活动状态(我发现很难看出Firebug是否为活动组件,但没有像试验和错误 – 当我看到Firefox查找工具栏是活跃的我会然后Shift + Tab向后两次进入Firebug。

  • 然后,我会使用左/右箭头键收缩/展开元素和U / D箭头键浏览Firebugs控制台

无论如何为我工作!

HTML工具提示(Firebug)

使用检查器或在DOM中select元素。 转到萤火虫中的“样式”标签,并点击标签上的小箭头,select“:hover”(也可用“:active”)。 状态将保持“hover”状态,您可以select其他元素使其hover。

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

在这里输入图像说明

单击button可以看到三个checkbox,您可以使用这三个checkbox为所选元素设置:hover,:active和:focus伪类

该function也可以从HTML视图的popup菜单中进行访问。

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

在这里输入图像说明

JQuery工具提示

打开控制台并inputjQuery('.css-class').trigger('mouseover')

普通的Javascript工具提示

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

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

在这里输入图像说明

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

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

代替:

  $( document ).tooltip(); 

您可以在mouseout事件处理程序的开始插入一个断点。 它的代码将不会被执行,直到你允许它继续,你可以在执行停止的时候使用DOM检查器等等。

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

去这里查看所有Firebug键盘快捷键的列表。

你也可以启动一个定时器的debugging器。 将这个命令input到控制台中:

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

这将使您使用鼠标10秒钟,并使页面看起来像你想要的方式来检查它。 debugging器启动时,页面将冻结,您将能够浏览开发者工具选项卡中的元素,而无需更改DOM或响应任何其他鼠标事件。

当select:hover在CSS菜单可能是好的,如果你只想检查一些CSS代码,它不工作,如果你想检查的东西是用JavaScript更改。

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

对于JavaScript事件,如鼠标hover

  1. 打开Firebug /检查一个元素。
  2. 点击鼠标hover事件前的元素 ,例如点击一个div。 它会变成蓝色显示它被选中。
  3. 把你的鼠标放在元素上不要从这一点移动它。
  4. 使用您的 / 箭头键在Firebug中操作。
  5. 使用 / 方向键用+或 – 展开/合同代码。
  6. 点按 两次Tab键即可进入CSS窗格。
  7. 使用箭头键导航。 使用shift和箭头键select文本。 Ctrl + C复制。
  8. 按住 Shift键双击 Tab键返回到HTML窗格。

对于引导工具提示:

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

我发现Chrome的工作方式与Firefox不同。 特别是,当在Chrome中检查菜单时,在菜单外单击鼠标时closures的菜单保持打开状态(并且在使用Firebug检查菜单时closures菜单)。 所以,build议是尝试在不同的浏览器中使用不同的开发工具,以查看它是否有所作为。

打开控制台:

如果您有基于JavaScript的工具提示,请使用适当的select器在控制台中查找适用的元素。 像下面一样,并确认你能够find适当的元素与select器。

 $('your selector') 

写上面的JavaScript和按回车。 你将有元素列表。

现在,例如,如果库在mouseenter上添加事件,请input以下脚本:

 $('your selector').mouseenter() 

按回车。

这样,您可以模拟鼠标移动事件,而不用实际的鼠标。 并且可以使用实际的鼠标指针在debugging器工具中调查东西。

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

Ctrl + Alt + B这是“突变”。 也就是说,当你在一个有萤火虫的元素(Control + Shift + C)上徘徊的时候,当HTML属性改变的时候,他们会碰到一个断点,让你可以轻松的浏览path等等。