【问题标题】:Firebug: How can I inspect an element I can't click on?Firebug:如何检查无法点击的元素?
【发布时间】:2011-09-24 13:06:50
【问题描述】:

我正在尝试使用 Firebug 来检查当我将鼠标悬停在照片上时出现的页面元素。

问题是,元素的位置与鼠标位置是动态偏移的,所以我无法右键单击它以获取“检查元素”选项。

我曾希望onhover元素会被插入到DOM中一个合理的位置,但到目前为止,我还没有找到它。

有什么建议吗?

【问题讨论】:

  • 注意:我不知道元素的 ID、类等——这就是我想要找出的。

标签: dom hover firebug mouseover inspect


【解决方案1】:

如果您知道 在 DOM 中的何处,新元素将被创建(通常这些元素被创建为 body 元素的子元素),您可以在创建时设置断点.

假设该元素将作为body 元素的子元素创建。如果您按照以下步骤操作,您将能够检查该元素:

  1. 加载页面
  2. 激活 FireBug 的 HTML 面板
  3. 找到body 元素
  4. 右键单击body 元素并从弹出菜单中选择Break on Child Addition or Removal
  5. 将鼠标悬停在您的照片上以触发所需元素的创建

脚本执行应在元素创建后立即中断。届时,您将拥有所有需要检查动态创建的元素的时间,即使在 HTML 面板中也是如此。

【讨论】:

  • 哇,这太巧妙了,谢谢。我刚刚检查了一下,似乎 Chrome 也有这个功能。这确实会派上用场。 :)
  • 顺便说一句,这个解决方案很棒,但是我试图检查的页面在 body 元素上有数百个突变,我想要捕获的事件很难预测它何时会发生,我真正想要的是一种在元素弹出时使用键盘快捷键或小书签冻结 dom 的方法,这样我就可以检查冻结的临时弹出元素。我要检查的元素随机弹出。
【解决方案2】:

这不是一个理想的解决方案,但您可以调查 onhover 代码以了解有关正在创建的元素的更多信息。该信息可能允许您在 Firebug 的 DOM 查看器中找到它。

【讨论】:

  • 我最终只是仔细研究了 DOM 查看器中的代码以找到无法触及的元素,但我以后会使用这个建议。
【解决方案3】:

您可以使用萤火虫窗口顶部的搜索栏搜索元素吗?

【讨论】:

    【解决方案4】:

    您可以使用 CTRL+F 在代码视图中找到它。

    【讨论】:

      猜你喜欢
      • 2011-10-29
      • 1970-01-01
      • 1970-01-01
      • 2011-03-09
      • 1970-01-01
      • 2019-09-17
      相关资源
      最近更新 更多