检查 Chrome 中的悬浮元素？

我试图通过 Chrome 的开发者工具来了解网站上的工具提示是如何构建的。但是，即使当我将鼠标悬停在该项上时，当我“检查元素”时，html 中的工具提示也不会显示任何内容。我知道我可以将 Style 设置为 :hover，但是我仍然看不到工具提示的 html 或 css。

有什么想法吗？

117623 次浏览
小开
最佳答案

实际上我找到了一个用 Bootstrap 工具提示做到这一点的诀窍。如果您在另一个监视器上打开 dev tools (F12) ，然后将鼠标悬停在该元素上，打开工具提示，右键单击，就好像您要选择“ InspectElement”一样。保持上下文菜单打开，将焦点移到 dev 工具。工具提示的 HTML 应该显示在元素的旁边，它是 HTML 中的工具提示。然后你可以把它看作是另一个元素。如果你回到 Chrome 浏览器，HTML 会消失，所以只需要注意一些事情。

有点奇怪，但对我很有效所以我想我可以分享一下。

小开

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

然而，我找到了帮助我的 https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution:

  1. 在控制台中: ，Run:
const F12 = 123
window.addEventListener('keydown', function(event) {
if (event.keyCode === F12 ) {
debugger;
}
});

  1. 与检查员一起突出元素

  2. 按 F12

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

小开

您只需要强制工具提示以这种方式显示

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

现在，不管悬停状态如何，工具提示都会显示出来。

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

更新 参见 cneuro 对 Bootstrap 3的评论。

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

更新 参见 Marko Greak 对 Chrome 和 Safari 的回答，$0可以作为当前选定元素的快捷方式。这似乎在 Safari 中也可以工作。

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

这个解决方案不需要任何额外的代码。

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

然后，在 Chrome 窗口中，将鼠标悬停在触发弹出窗口的元素上，按 command-`，无论多少次你需要集中在控制台上，然后键入 debugger。这将冻结页面，然后您可以检查 Elements 选项卡中的元素。

小开

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

小开

这里有一个简单的解决方案: 如果您有动态工具提示，您可以通过(暂时)将触发器事件更改为 click来使它们“持久化”。这会产生这样的效果: 工具提示只有在点击后才会消失:

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

通过这种方式，可以很容易地用 FF 或 Chrome 的调试工具检查它。

小开

F8将暂停调试。

在 Mac 上，你可能需要打开开发工具的“源”选项卡。

鼠标在工具提示上方，并在显示时按 F8。

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

小开

值得注意的是，从 dev 工具中切换: hover 状态只有在首先通过 CSS: hover 规则启用提示文本时才会产生影响。切换只为呈现目的将悬停状态应用于元素，但不触发相应的 JavaScript mouseover 事件。

当目标元素悬停时，许多框架(如 AngularJS)通过 JavaScript 动态地将工具提示 HTML 附加到文档体的底部，因此任何悬停和检查目标元素的做法都没有帮助。

@ Joeyyang 的回答在这种情况下对我很有效。

小开

在 Chome 的 Linux 平台上，可以通过以下方法实现 JS 生成的工具提示，比如那些在维基百科上参考的工具提示:

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

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

在某种程度上，它也与自举提示工程。

小开

出于某种原因，这里提供的答案在 Windows 上对我不起作用。我可以通过打开 dev 工具来检查工具提示，然后将鼠标悬停在打开工具提示的元素上，然后右键单击该元素(而不是工具提示)。然后，将光标移动到检查面板并向下滚动到底部。工具提示元素应该仍然存在。

小开

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

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

小开

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

2)转到源选项卡(控制台旁边)

3)现在将鼠标悬停在被检查的元素上，并将鼠标停留在那里。

4)使用键盘(Tab 或 shift + Tab)将控件移动到暂停按钮或 F8参考图像

5)当键盘焦点在播放按钮上时，按回车键。你的悬停元素将被冻结，你现在可以做任何事情了

小开

单窗口应答，没有编码

其他的答案都不完全正确，也没有足够的细节，所以我尝试这样做。

  • 使用 F12/Ctrl + Shift + I (Windows/Linux)或 Command + Option + I (Mac)打开 Chrome 的 DevTools。
  • 在 DevTools 窗口中选择 消息来源选项卡。
  • 使用鼠标悬停在要检查的元素上，使工具提示可见。
  • 按 F8(Windows/Linux/Mac)暂停脚本执行。主窗口将变成灰色，并出现一个“暂停在调试器”弹出窗口。
  • 在 DevTools 窗口中，选择 元素选项卡
  • 对于 Bootstrap 工具提示，工具提示将作为 <body>中的最后一个 <div>出现
小开

单击 f12转到控制台选项卡并添加以下内容:

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

这将给你5秒钟做任何你想要的，它将打破在 5 seconds。然后您可以检查目标元素

(例如，悬停元素，等待5秒钟，然后检查. .)

小开

Dev 工具提供了一种像工具提示一样检查悬浮元素的方法。

1-使用 F12打开 dev 工具。

2-选择“元素”标签。

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

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

Set a Break on parent element

最后回到应用程序，让工具提示显示出来。它应该在工具提示可见后阻止执行

希望对某些人有用！

小开

按照以下步骤操作

  1. 用铬打开 Inspect窗口。

  2. 将鼠标放在工具提示上。

  3. 按 F8

    JS 执行将暂停，然后您可以检查工具提示。

  4. 再次按 F8开始执行，按 F10调试。

小开

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

  1. 在边上打开 Chrome 开发工具

  2. 悬停在元素上方

  3. 右击

  4. 单击 dev tools

  5. 现在您可以检查和更改样式

小开

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

步骤1 : 检查包含工具提示的元素，确保在 devtools 中用蓝色突出显示。

步骤2 : 右键单击元素(在 devtools 部分) ，然后在 Break on 下面选择: Attribute Amendment enter image description here

步骤3 : 将鼠标悬停在被检查的元素上，网站上将出现一个灰色的覆盖物，上面有一个小文本: 在调试器中暂停

enter image description here

在你的屏幕上方

步骤4 : 单击蓝色箭头，直到选中悬停状态。

步骤5 : 检查并编辑工具提示

小开

我找到的另一个解决这个问题的方案。通过 Chrome 中的移动或平板电脑视图 在 Chrome 开发工具中按 Crt + Shift + M在 Chrome 中进行移动视图。 在 ToolTip div 上单击(点击) ，您可以在工具提示上使用 右击检查它

小开

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

然后，在 Chrome 窗口中，将鼠标悬停在触发弹出窗口的元素上，按 command-，无论多少次你需要集中在控制台上，然后键入 debugger。这将冻结页面; 然后您可以检查 Elements 选项卡中的元素。

小开

我在 Mac 上是这样做的:

  1. 悬停在打开了 chrome devtools 的工具提示的元素上。
  2. 等待工具提示出现。
  3. 用一个快捷键打开 devtools 命令面板。
  4. 输入 Disable JavaScript然后按 Enter

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

小开

将鼠标悬停在元素上，按 F8稍微久一点，就会暂停脚本的执行。

小开

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

window.onkeydown = () => { debugger }
小开
  1. 在鼠标上显示悬浮的物体
  2. Windows —— > Ctrl + shift + c | | Mac —— > Command + Option + C
小开

我找到了一个解决问题的好办法: •开放元素选项卡 •检查页面上的一个元素，应该靠近要检查的元素 悬停在工具提示上 当 dev/Elements 选项卡打开时，点击 Ctrl F 将焦点移动到元素选项卡中的 Text 区域，在那里它通过字符串、选择器或 Xpath 说“查找” •使用键盘按键在元素上下导航，直到找到你要找的元素，不要触摸鼠标

小开

在这篇文章中寻找答案，并最终找到一种方法来做到这一点。检查工具提示的父元素并在子树改变 图片来源: img src = “ https://i.stack.imgur.com/crt41.png”alt = “ devtool brean on subtree change”/> 上设置中断，将鼠标悬停在元素上，然后单击 F8直到工具提示出现。您可以使用工具提示并检查样式。


提交答案