Firefox 和 Firebug：如何检查动态生成的引导工具提示？答案

【问题标题】：Firefox and Firebug: how to inspect dynamically generated Bootstrap tooltip?Firefox 和 Firebug：如何检查动态生成的引导工具提示？
【发布时间】：2014-05-17 12:31:01
【问题描述】：

我想在 Bootstrap (3.x) 工具提示中添加一个 CSS 类，但它似乎不起作用。所以我想使用 Firebug 来检查工具提示内容。但是，当我将鼠标移动到 Firebug 区域时，动态生成的工具提示消失了。

如何检查动态生成的引导工具提示？

这里是jsfiddle link。

<label>
Some Text 
<a href="#" data-toggle="tooltip" title="Tooltip goes here!">?</a>
</label>

$(function() { 
    $('[data-toggle="tooltip"]').tooltip({
        'animation': true,
        'placement': 'top' 
    });
});

谢谢！

【问题讨论】：

标签： twitter-bootstrap firefox firebug

【解决方案1】：

启用Script panel
重新加载页面
检查包含Some Text? 的<label> 元素
右键单击元素并从上下文菜单中选择Break On Child Addition or Removal
将鼠标移到问号上 => 脚本执行将停止，您将看到一个提示，显示工具提示元素。

按下 Step Over 按钮 () 或按下 F10 一次，元素被添加到 DOM 中
切换到HTML panel

=> 在那里您将看到包含工具提示的<div>，您将能够检查其样式。

【讨论】：

不适用于这种情况：hearthpwn.com/forums/hearthstone-general/card-discussion/… 然后将鼠标悬停在蓝色的“虚空恐惧”上。如何检查图像工具提示？
对于这种情况，步骤是不同的。在 HTML 面板中单击Break On Mutate button，然后将鼠标悬停在“Void Terror”上。脚本执行将停止，Firebug 切换到 Script 面板，顶部有通知说明哪个元素（在本例中为工具提示元素）已更改。单击该元素，您将返回到 HTML 面板，并在其中选择了该元素。

【解决方案2】：

我一直在寻找如何在 firebug 中检查 JQuery 工具提示

检查 Firebug 中的元素
选择右侧的“事件”标签
禁用 mouseoutevent。
现在，当鼠标离开元素时，工具提示会保留。可以通过 FireBug 像任何其他元素一样进行检查。

这是一个小视频：https://youtu.be/msTU8JDnaBU

【讨论】：

【解决方案3】：

我发现唯一的主要步骤（而不是 Sebastian Zartner 接受的答案中的步骤 1-5）是首先启用 Firebug 的 HTML 选项卡的“Break On Mutate”按钮。它是该选项卡中最左上角的按钮。

只需这一步，当有动态显示的工具提示时，JavaScript 将暂停。然后，您可以检查 CSS 样式，或使用脚本的跳过按钮来查看该工具提示的 Javascript 行。

Firebug 版本是 2.0.17

【讨论】：