Firefox和Firebug：如何检查动态生成的Bootstrap工具提示？

Question

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

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

这是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' 
    });
});

谢谢！

Answer 1

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

6. 按Step Over按钮（）或按F10一次，这样元素就会添加到DOM中
7. 切换到HTML panel

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

Answer 2

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

1. 检查Firebug中的元素
2. 选择右侧的“事件”选项卡
3. 禁用mouseoutevent。
4. 现在当鼠标离开元素时，工具提示会保留。可以通过FireBug检查任何其他元素。

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

Answer 3

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

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

Firebug版本是2.0.17