在我的情况下，我想dubug引导工具提示。但是上面的方法对我不起作用。我猜bootstrap通过鼠标in/out事件实现了这一点。

无论如何，当我悬停在一个按钮上时，它会在按钮下面生成一个兄弟html元素，所以我在“开发人员工具”窗口的“元素”选项卡中选择按钮的父元素，悬停按钮，然后“Ctrl + C”，然后我可以粘贴包含生成代码的源代码。最后找到生成的代码，并通过“元素”选项卡中的“编辑为HTML”将其添加到源代码中。

希望它能帮助到一些人。

对我来说，为了调试这个工具提示，我点击切换设备工具栏切换到移动视图，然后点击有悬停效果的div，你也可以点击焦点可见来查看div和工具提示之间的间距，希望这将有所帮助。

有几种方法可以在Chrome开发工具中查看HOVER STATE样式。

方法1

方法2

与Firefox默认开发者通行费

与Firebug

在我的情况下，我想dubug引导工具提示。但是上面的方法对我不起作用。我猜bootstrap通过鼠标in/out事件实现了这一点。

无论如何，当我悬停在一个按钮上时，它会在按钮下面生成一个兄弟html元素，所以我在“开发人员工具”窗口的“元素”选项卡中选择按钮的父元素，悬停按钮，然后“Ctrl + C”，然后我可以粘贴包含生成代码的源代码。最后找到生成的代码，并通过“元素”选项卡中的“编辑为HTML”将其添加到源代码中。

希望它能帮助到一些人。

我认为这在Chrome中不再是一个问题，只是以防万一。我写了这个jQuery脚本，当我用TAB键移动时检查DOM。

如果更改为使用'mouseover'，将看起来像这样:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

您可以轻松地修改它，以便在单击或对想要停止的元素进行操作时删除事件处理程序。

我知道我所做的是相当的变通，但它工作完美，这是我每次都做的方式。

然后，像这样进行:

首先确保Chrome开发工具是未停靠的。 然后，将Dev Tools窗口的任意一侧移动到你想要检查的元素中间。

最后，悬停元素，右键单击并检查元素，将鼠标移动到开发工具窗口，你将能够玩你的元素:悬停css。

干杯!