检查Chrome中的悬停元素？

106

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

有任何想法吗？

html  css  hover  google-chrome-devtools 
— Skitterm
source
— 穆罕默德·阿卜杜勒法塔赫

Answers:

80

实际上，我发现了一个使用Twitter Bootstrap工具提示进行操作的技巧。如果在另一台监视器上打开开发工具（F12），则将鼠标悬停在该元素上以显示工具提示，右键单击，就像选择“检查元素”一样。使该上下文菜单保持打开状态，将焦点移至开发工具。工具提示的html应该显示在HTML中其工具提示所在的元素旁边。然后，您可以将其视为另一个元素来查看。如果您返回Chrome浏览器，则HTML会消失，因此需要注意的地方。

有点奇怪，但是对我有用，所以我想分享一下。

— 贾斯汀·Chmura
source
12
是的，但不适用于Mac。
— actimel
2
-步骤1：检查生成工具提示的元素，以调出Chrome Dev工具。-步骤2：将鼠标悬停在元素上时，将显示工具提示。在不离开元素的情况下，打开一个新窗口（在Mac上为Command-N，在其他地方为Ctrl-N）-第3步：将新窗口拖动到旧窗口下方，这样您仍然可以看到工具提示，然后将光标移到Element检查器中。-步骤4：滚动到底部，您的工具提示将附加到DOM。单击元素以查看其样式。
— pgblu 2015年
2
PS这不适用于通过Javascript从元素自身的title属性生成的工具提示，例如发生在SO上。这些工具提示使用默认样式。
— pgblu
这有助于我在剑道中获得工具提示
— k29
1
诀窍：首先转到“源”选项卡。然后您可以使用F8按钮暂停Javascript。暂停键位于其中，快捷键为F8 / Ctrl + \（此页面上@Rajan的回答）
— rostamiani
85

此解决方案无需任何额外的代码即可工作。

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

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

— 乔阳
source
6
这个答案真的很好。最少的代码，没有jQuery或双显示器设置。
— uKolka 2014年
1
有效！最初由于某些配置错误，我看到的是默认的HTML工具提示，而不是Bootstrap工具提示。解决该问题后，您的解决方案开始工作。谢谢。
— DFB
2
另外，如果在编写debugger控制台时失去焦点，则可以alt+tab在将鼠标悬停在元素上时按。它适用于Windows上的Chromium应用。
— Orcun
1
这是一个很好的答案！
— 大雄
Chrome DevTools键盘快捷键页面显示，将焦点放在控制台上是Control +而不是Command +。也许改变了。
— rinat.io
85

F8 将暂停调试。

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

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

— 德约翰斯顿
source
4
我喜欢Stackoverflow中的方式，只要您一直向下滚动，就会发现这个真正的好答案远胜于其他答案。无需额外的脚本，这既简单又容易。
— 亚历山大·迪克森
2
F8出于某种原因对我不起作用，但是暂停也必然会导致ctrl- \
— Bryan Larsen
最好的解决方案
— NiallMitch14
我的德语键盘布局上的<kbd> F8 </ kbd>和<kbd> AltGr </ kbd>-<kbd> RCtrl </ kbd>-<kbd>ß</ kbd>都不会暂停调试器。
— 测试
63

您只需要强制工具提示就这样显示

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

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

向下滚动到DOM底部附近，您将在其中看到标记。

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

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

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

$($0).tooltip('show')
— 亚当·格兰特
source
1
$（'。myelement'）。tooltip（'open'）对我有用。
— tekumara 2014年
6
从Bootstrap 3开始，现在是.tooltip('show') getbootstrap.com/javascript/#tooltips-methods
— cneuro
2
在Chrome中，可以像$0在控制台中一样访问当前选定的元素。因此，您可以选择触发工具提示并运行的元素$($0).tooltip('show')。
— MarkoGrešak'17
31

单击f12转到控制台选项卡，然后添加以下内容：

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

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

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

— 阿里·克莱特
source
在Electron中也可以使用。
— xmedeko
24

对我来说，无法接受的答案不起作用：单击DevTools立即关闭ToolTip。

但是，我发现/superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution对我有帮助：

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

  1. 使用检查器突出显示元素

  2. 击中F12

现在，您可以在JavaScript暂停的情况下检查该元素，以便DOM不会更改。

— 迈克马卡纳
source
1
聪明！正是我想要的。谢谢:)尽管由于某些原因它在F12上不起作用，所以我使用keyCode == 13并按Enter。
— 杰里米·F
2
很好的解决方案！我建议您将此有用的代码段保存在chrome的SOURCE-> SNIPPETS区域中，以便您只需双击即可执行;）
— Magico 2016年
1
这一解决方案远胜于公认的解决方案。我要把它做成书签！
— 露露
1
很好的解决方案。非常聪明。
— 查理·达萨斯
1
完善。应该是正确/可接受的答案！
— Brosig
10

单窗口答案，无需编码

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

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

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

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

— 克莱恩里克
source
2

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

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

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

— x
source
2

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

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

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

4）使用键盘（Tab或移+标签）来移动控制以暂停按钮或F8 参考图像

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

— 拉詹
source
1

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

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

第2步：右键单击元素（在devtools部分中），然后选择：Break on下的属性修改。 在此处输入图片说明

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

在此处输入图片说明

在屏幕顶部

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

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

— 卡塔林
source
0

我对此有疑问，所以我去了文档并检查了页面上已经呈现的工具提示。这有助于我查看工具提示的dom结构并进行相应的编辑。

— 菲利普
source
0

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

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

如果您需要在关闭鼠标时使笔尖保持打开状态，以便能够在其他窗口中进行更彻底的检查，请右键单击工具提示并保留上下文菜单，然后单击“开发工具”窗口。在这种情况下，它将提示留在Wikipedia窗口中。

在某种程度上，它也可以与引导技巧一起使用。

— 用户1806949
source
0

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

— 诺兰·林德克（Nolan Lindeke）
source
0

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

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

2-选择“元素”选项卡。

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

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

在父元素上设置间隔

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

希望它对某人有用！

— 里卡多·玛加良斯（RicardoMagalhães）
source
0

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

— HERAwais
source
0

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

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

— Okau123
source
-1

值得注意的是，仅当首先通过CSS：hover规则启用提示文本时，才可以从dev工具中切换：hover状态。切换仅将悬停状态应用于元素以进行渲染，而不会触发相应的JavaScript鼠标悬停事件。

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

在这种情况下，@ joeyyang的回答对我来说非常有效。

— 约翰·里克斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.