Question

我试图通过Chrome的开发者工具查看工具提示在网站上的结构。然而，即使我在项目上空盘旋，当我“检查元素”时，html中的工具提示也没有显示。我知道我可以将样式设置为:hover，但我仍然看不到工具提示的html或css。

有什么想法吗？

Answer 1

此解决方案无需任何额外代码即可运行。

点击command-option-j打开控制台。单击控制台右上角的窗口按钮，在另一个窗口中打开控制台。

然后，在Chrome窗口中，将鼠标悬停在触发弹出窗口的元素上，点击command-`，但是需要多次关注控制台，然后键入debugger。这将冻结页面，然后您可以检查元素选项卡中的元素。

Answer 2

您只需要强制显示工具提示

$('.myelement').tooltip('open');

现在无论悬停状态如何，工具提示都会显示。

向下滚动靠近DOM底部，您应该看到标记。

更新请参阅cneuro对Bootstrap 3的评论。

$('.myelement').tooltip('show');

更新请参阅MarkoGrešak对Chrome的回答，显然还有Safari，$0可用作当前所选元素的快捷方式。这似乎也适用于Safari。

$($0).tooltip('show')

Answer 3

我实际上通过Twitter Bootstrap工具提示找到了一个技巧。如果在另一台显示器上打开开发工具（F12），则将鼠标悬停在元素上以显示工具提示，右键单击，就像选择“检查元素”一样。保持打开上下文菜单，将焦点移至开发工具。工具提示的html应该显示在元素旁边，它是HTML中的工具提示。然后你可以把它看作是另一个元素。如果你回到Chrome，HTML就会消失，所以只需要注意一些事情。

有点奇怪，但它对我有用，所以我想我会分享它。

Answer 4

F8将暂停调试。

将鼠标悬停在工具提示上，然后在显示时按F8。

您现在可以使用检查器查看CSS。

Answer 5

对我来说，接受的答案不起作用：点击DevTools会立即关闭工具提示。

然而，我发现https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution帮助了我：

在控制台中：，运行： window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; });
使用检查器突出显示元素
点击F12

现在可以检查元素，暂停JavaScript，这样DOM就不会改变。

Answer 6

点击f12进入控制台标签并添加以下内容：

setTimeout(()=> {debugger},5000)

这将使您有5秒钟的时间做自己想做的事情，并且会在5 seconds处中断。然后您可以检查目标元素

（例如，将鼠标悬停在元素上，等待5秒钟，然后检查。）

Answer 7

没有针对JS激活的工具提示的代码解决方案：

使用Chrome的devtools检查工具提示中包含/父元素。在“元素”选项卡中，右键单击该容器DOM元素，然后选择“中断”>“子树修改”。下次将鼠标悬停在工具提示所在的DOM部分上时，JS代码将暂停，您可以检查工具提示的内容。

Answer 8

将鼠标悬停在元素上，再按 F8 键，它将暂停脚本执行。

Answer 9

编辑这些工具提示非常简单。

步骤1 ：检查具有工具提示的元素。确保在devtools中将其突出显示为蓝色。

第2步：右键单击元素（在devtools部分中），然后选择：属性修改，位于Break on下

第3步：将鼠标悬停在检查的元素上，网站上将出现灰色叠加层，并带有一小段文字：已在调试器中暂停

在屏幕顶部

第4步：点击蓝色箭头，直到选择了悬停状态。

第5步：检查并编辑工具提示

Answer 10

单窗口答案，无需编码

没有其他答案是正确的，或者没有足够的细节，所以这是我的尝试。

使用F12 / Ctrl + Shift + I（Windows / Linux）或Command + Option + I（Mac）打开Chrome的DevTools。
在DevTools窗口中选择 Sources 标签。
使用鼠标悬停在要检查的元素上，以使工具提示可见。
按F8键（Windows / Linux / Mac）暂停脚本执行。主窗口将显示为灰色，并弹出“ Pauseed in debugger”。
在“ DevTools”窗口中，选择“ 元素”选项卡
对于Bootstrap工具提示，该工具提示将显示为<div>中的最后一个<body>

Answer 11

这是我在Mac上的操作方式：

将鼠标悬停在带有打开了chrome devtools的工具提示的元素上。
等待工具提示出现。
使用键盘快捷键打开devtools命令面板。 { $group: { _id: "$_id.busID", status: { $push: { k: "$_id.status", v: "$subtotal" } } } }, { $project: { _id: { $mergeObjects: [ { busID: "$_id" }, { $arrayToObject: "$status" } ] } } }为我工作。
键入Cmd+Shift+P，然后按Disable JavaScript

这将防止褪色所有使用JavaScript的工具提示。

Answer 12

遵循这些步骤

在Chrome中打开Inspect窗口。
将鼠标置于工具提示上。
按 F8

JS执行将被暂停，然后您可以检查工具提示。
再次按 F8 开始执行，按 F10 进行调试。

Answer 13

这是一个简单的解决方案：如果你有动态工具提示，你可以通过（暂时）将触发事件更改为click来使它们“持久”。这将导致工具提示仅在点击时消失：

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

这样，可以使用FF或Chrome的调试工具轻松检查。

Answer 14

1）单击F12打开“检查”窗口

2）转到“源”选项卡（控制台旁边）

3）现在将鼠标悬停在要检查的元素上，并将鼠标放在那儿。

4）使用键盘（Tab或Shift + Tab）将控件移至暂停按钮或F8 Refer the image

5）当键盘焦点位于“播放”按钮上时。按回车。您的悬停元素将被冻结，您现在可以执行任何操作

Answer 15

出于某种原因，这里提供的答案对我来说并不适用于Windows。我能够通过打开开发工具检查工具提示，然后将鼠标悬停在显示工具提示的元素上，然后右键单击该元素（而不是工具提示）。然后，将光标移动到检查器面板并向下滚动到底部。工具提示元素应该仍然存在。

Answer 16

开发工具提供了一种检查诸如工具提示之类的悬停元素的方法。

1-使用F12打开开发工具。

2-选择“元素”标签。

3-选择包含工具提示的父元素。

4-单击“ ...”（在父元素行上），然后选择“中断” /“子树修改”（请参见下图）

5-最后返回应用程序，并显示工具提示。在工具提示可见后，它应该阻止执行

希望对某人有用！

Answer 17

在Linux上的Chome中，可以通过执行以下操作来实现JS生成的工具提示，例如WikiPedia上的引用：

如上所述，使用F12打开开发工具。在另一个窗口打开它们。突出显示工具提示，然后单击Ctrl-Shift-C（HTML检查器）。当您移动提示时，开发窗口将显示相应的部分。

如果你需要在鼠标离开时保持笔尖打开，以便能够更彻底地在另一个窗口中检查它，然后右键单击工具提示并保持上下文菜单，然后单击开发工具窗口。在这种情况下，它会将提示留在维基百科窗口中。

在某种程度上，它也适用于引导技巧。

Answer 18

我发现的最简单的方法之一是：

打开侧面的Chrome开发工具
将鼠标悬停在元素上
右键单击
点击开发工具
现在您可以检查和更改样式

Answer 19

我为此问题找到了另一个解决方案。通过Chrome中的移动设备或平板电脑视图在Chrome开发工具中按 Crt + Shift + M 在Chrome的“移动”视图中。在工具提示div上单击（点击），然后可以在工具提示上单击右键对其进行检查

Answer 20

按command-option-j打开控制台。单击控制台右上角的窗口按钮，以在其他窗口中打开控制台。

然后，在Chrome窗口中，将鼠标悬停在触发弹出窗口的元素上，按command-，但是您需要多次关注控制台，然后键入debugger。那会冻结页面；然后您可以在“元素”标签中检查元素。

Answer 21

我遇到了这个问题所以我去了to the documentation并检查了已经在页面上呈现的工具提示。这有助于我看到工具提示的dom结构并相应地进行编辑。

Answer 22

只需在控制台中点击一行脚本并按任意键即可进入调试模式。

window.onkeydown = () => { debugger }

Answer 23

通过鼠标悬停显示项目
windows --> Ctrl + shift + c || Mac --> Command + Option + C

Answer 24

值得注意的是，如果通过CSS启用提示文本，那么从开发工具中切换：悬停状态只会产生影响：首先是悬停规则。切换仅将悬停状态应用于元素以进行渲染，但不会触发相应的JavaScript鼠标悬停事件。

当目标元素悬停时，许多框架（如AngularJS）通过JavaScript动态地将工具提示HTML附加到文档正文的底部，因此任何数量的悬停和检查目标元素都无济于事。

在这种情况下，@ joeyyang的回答对我很有帮助。

检查Chrome中的悬停元素？

24 个答案: