检查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页面拖动图像
  • 用HTML和CSS进度条
  • 为Internet Explorerinput占位符
  • 如何用CSS更改滚动条位置?
  • Javascript正则expression式来validationURL
  • HTML抓取的选项?
  • 如何将标签与单选button相关联
  • 为什么要使用<label>?
  • 我怎样才能创build一个只有HTML和CSS的圆形箭头?
  • 在不同的柔性容器中柔性物品的高度相等的列