检查Chrome中的悬停元素？
Ski*_*erm 87 html css hover google-chrome-devtools
我试图通过Chrome的开发者工具查看工具提示在网站上的结构.然而,即使我在项目上空盘旋,当我"检查元素"时,html中的工具提示也没有显示.我知道我可以设置样式:hover,但我仍然无法看到工具提示的html或css.
有任何想法吗？
Jus*_*ura 70
我实际上通过Twitter Bootstrap工具提示找到了一个技巧.如果在另一台显示器上打开开发工具(F12),则将鼠标悬停在元素上以显示工具提示,右键单击,就像选择"检查元素"一样.保持打开上下文菜单,将焦点移至开发工具.工具提示的html应该显示在元素旁边,它是HTML中的工具提示.然后你可以把它看作是另一个元素.如果你回到Chrome,HTML就会消失,所以只需注意一些事情.
有点奇怪的方式,但它对我有用,所以我想我会分享它.
- 是的,但不是在Mac上. (6认同)
- 窍门：首先转到源选项卡。然后您可以使用 F8 按钮暂停 Javascript。暂停键的快捷键是 F8 / Ctrl+\ （本页 @Rajan 的答案） (4认同)
- -步骤1：检查生成工具提示的元素，以调出Chrome Dev工具。-步骤2：将鼠标悬停在元素上时，将显示工具提示。在不离开元素的情况下，打开一个新窗口（在Mac上为Command-N，在其他地方为Ctrl-N）-第3步：将新窗口拖动到旧窗口下方，这样您仍然可以看到工具提示，然后将光标移到Element检查器中。-步骤4：滚动到底部，您的工具提示将附加到DOM。单击元素以查看其样式。 (2认同)
- PS 这不适用于通过 Javascript 从元素自己的标题属性生成的工具提示，例如发生在 SO 上。这些工具提示使用默认样式。 (2认同)
joe*_*ang 70
该解决方案无需额外代码即可运行.
点击command-option-j打开控制台.单击控制台右上角的窗口按钮,在另一个窗口中打开控制台.
然后,在Chrome窗口中,将鼠标悬停在触发弹出窗口的元素上,command-`无论多少次都需要关注控制台,然后键入debugger.这将冻结页面,然后您可以检查元素选项卡中的元素.
- 这个答案非常好.最小的代码,没有jQuery或双显示器设置. (5认同)
- `debugger`对我不起作用,但`F8`确实如此. (4认同)
- 此外，如果您在将 `debugger` 写入控制台时失去焦点，则可以在将鼠标悬停在元素上时按 `alt+tab`。它适用于 Windows 上的 Chromium 应用程序。 (2认同)
Ada*_*ant 63
您只需要强制显示工具提示即可
$('.myelement').tooltip('open');
现在无论悬停状态如何,工具提示都会显示.
向下滚动到DOM底部附近,您应该看到标记.
更新见cneuro对Bootstrap 3的评论.
$('.myelement').tooltip('show');
更新见MarkoGrešak对Chrome的回答,显然也是Safari,$0可以用作当前所选元素的快捷方式.这似乎也适用于Safari.
$($0).tooltip('show')
- 从Bootstrap 3开始,现在是`.tooltip('show')`http://getbootstrap.com/javascript/#tooltips-methods (6认同)
- 在 Chrome 中，当前选择的元素可以在控制台中以 `$0` 的形式访问。因此，您可以选择触发工具提示的元素并运行`$($0).tooltip('show')`。 (4认同)
dwj*_*ton 61
F8 将暂停调试.
将鼠标悬停在工具提示上,然后F8在显示时按.
您现在可以使用检查器查看CSS.
- 不适合我。在 Mac 上的 Chrome 中 (5认同)
- 我喜欢Stackoverflow中的方式，只要您一直向下滚动，就会发现这个真正的好答案远胜于其他答案。无需额外的脚本，这很简单。 (3认同)
- 由于某些原因,F8对我不起作用,但暂停也必然是ctrl- \ (2认同)
mik*_*ana 21
对我来说,接受的答案不起作用:点击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不会更改.
- 聪明的 ！正是我正在寻找的东西。谢谢:) 虽然由于某种原因它不能在我的设置中使用 F12，所以我使用了 keyCode == 13 并按 ENTER。 (3认同)
- 很好的解决方案！我建议将这个有用的片段保存在 chrome 的 SOURCE -> SNIPPETS 区域中，以便您只需双击即可执行它；) (2认同)
小智 9
编辑这些工具提示非常简单。
第 1 步：检查具有工具提示的元素。确保它在开发工具中以蓝色突出显示。
步骤 2：右键单击该元素（在 devtools 部分）并选择：属性修改，在 Break on 下
第 3 步：将鼠标悬停在检查的元素上，站点上将出现灰色覆盖层，并带有小文本：在调试器中暂停
在屏幕顶部
步骤4：点击蓝色箭头，直到选择悬停状态。
第 5 步：检查并编辑工具提示
Click f12 go to the console tab and add the following:
setTimeout(()=> {debugger},5000)
This will give you 5 seconds to do whatever you want and it will break at 5 seconds. Then you can inspect the target element
(ex. hover the element and wait 5 seconds then inspect..)
- 谢谢，这是在 Mac Chrome (Bootstrap 4) 上对我有用的唯一解决方案 (5认同)
单窗口答案，无需编码
没有其他答案是正确的，或者没有足够的细节，所以这是我的尝试。
- 使用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>
- 关键是当您执行 F8 时，您需要进入“源”选项卡。其他选项卡对我不起作用 (4认同)
以下是我在 Mac 上的操作方法：
- 将鼠标悬停在具有打开的 chrome devtools 工具提示的元素上。
- 等待工具提示出现。
- 使用键盘快捷键打开 devtools 命令面板。
Cmd+Shift+P为我工作。 - 输入
Disable JavaScript并按Enter
这将防止所有使用 JavaScript 的工具提示消失。
JS激活的工具提示没有代码解决方案：
使用Chrome的devtools检查工具提示中的contains / parent元素。在“元素”选项卡中，右键单击该容器DOM元素，然后选择“中断”>“子树修改”。下次将鼠标悬停在工具提示所在的DOM部分上时，JS代码将暂停，您可以检查工具提示的内容。
小智 5
只需在控制台中点击一行脚本，然后按任意键即可进入调试模式。
window.onkeydown = () => { debugger }