检查Chrome浏览器中的hover元素?

我正在尝试通过Chrome的开发人员工具查看工具提示在网站上的结构。 然而,即使当我在项目上盘旋时,当我“检查元素”,什么也没有显示在html中的工具提示。 我知道我可以将样式设置为:hover ,但我仍然无法看到工具提示的HTML或CSS

有任何想法吗?

10 Solutions collect form web for “检查Chrome浏览器中的hover元素?”

我实际上find了一个与Twitter Bootstrap工具提示相关的技巧。 如果您在另一个显示器上打开开发工具(F12),将鼠标hover在元素上以显示工具提示,右键单击,如同select“检查元素”。 将该上下文菜单保持打开状态,将焦点移至开发工具。 工具提示的html应该显示在HTML元素旁边的工具提示中。 那么你可以把它看作是另一个元素。 如果你回到Chrome的HTML消失,所以只是要注意的东西。

一种奇怪的方式,但它为我工作,所以我想我会分享它。

您只需强制显示工具提示即可

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

现在,无论hover状态如何,工具提示都会显示。

向下滚动到DOM的底部,您应该看到标记。

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

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

更新请参阅MarkoGrešak对Chrome的回答, $0可用作当前选定元素的快捷方式。 这似乎也在Safari中工作。

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

这个解决scheme没有任何额外的代码。

点击command-option-j打开控制台。 点击控制台右上angular的窗口button,在另一个窗口中打开控制台。

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

F8会暂停debugging。

将鼠标hover在工具提示上,并在显示时按F8键。

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

对我来说,接受的答案是行不通的:单击DevTools立即closures工具提示。

但是,我发现https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution帮助我:

  1. 在控制台中,运行: window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; });
  2. 使用检查器高亮显示元素

  3. 打F12

您现在可以检查元素,并将JavaScript暂停,以便DOM不会更改。

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

这里有一个简单的解决scheme:如果你有dynamic工具提示,你可以通过(暂时)改变触发事件来click来使它们“持久”。 这将有一个效果,工具提示只消失在一个点击:

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

这样,使用FF或Chrome的debugging工具就可以轻松进行检查。

值得注意的是,在开发工具中切换hover状态只有在通过CSS启用提示文本时才会产生影响:首先hover规则。 切换仅将hover状态应用于元素以进行呈现,但不会触发相应的JavaScript鼠标hover事件。

当目标元素hover时,许多框架(如AngularJS)通过JavaScriptdynamic地将工具提示HTML附加到文档主体的底部,因此任何数量的hover和检查目标元素都无济于事。

@ joeyyang的答案在这种情况下对我很好。

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

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

如果在鼠标hover的时候需要保持打开状态,可以在其他窗口中更彻底地检查它,然后右键单击工具提示并保持上下文菜单,然后单击开发工具窗口。 在这种情况下,它将在维基百科窗口中留下提示。

在一定程度上它也适用于引导技巧。

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

  • 是否可以格式化HTML工具提示(标题属性)?
  • 你能提供parsingHTML的例子吗?
  • 具有多个“操作”的HTML表单
  • 如何在php中使用一张图片绘制一个形状
  • 表的边界半径不起作用
  • alignment表格标题中的文字
  • Div只有水平滚动
  • 如何在网站上使用Google的Roboto字体?
  • UTF-8编码的html页面显示 (问号)而不是字符
  • 转义HTML的文本
  • HTMLselect元素closures时是否会触发DOM事件?