Html 检查 Chrome 中悬停的元素？

Inspect hovered element in Chrome?

提问by Skitterm

I am trying to view, through Chrome's developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I "inspect element", nothing shows for the tooltip in the html. I know I can set the Style to :hover, but I still can't see the html or css of the tooltip.

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

Any ideas?

有任何想法吗？

采纳答案by Justin Chmura

I actually found a trick to do that with the Twitter Bootstrap tooltips. If you open the dev tools (F12) on another monitor, then hover over the element to bring up the tooltip, right click as if you were to select 'Inspect Element'. Leaving that context menu open, move the focus over to the dev tools. The html for the tooltip should show up next to the element its a tooltip for in the HTML. Then you can look at it as if it were another element. If you go back to Chrome the HTML disappears so just something to be aware of.

我实际上找到了一个使用 Twitter Bootstrap 工具提示来做到这一点的技巧。如果您在另一台显示器上打开开发工具 (F12)，然后将鼠标悬停在该元素上以显示工具提示，右键单击，就像您要选择“检查元素”一样。让上下文菜单保持打开状态，将焦点移到开发工具上。工具提示的 html 应该显示在元素旁边，它是 HTML 中的工具提示。然后，您可以将其视为另一个元素。如果你回到 Chrome，HTML 就会消失，所以需要注意一些事情。

Kind of a weird way but it worked for me so I figured I would share it.

有点奇怪，但它对我有用，所以我想我会分享它。

回答by joeyyang

This solution works without any extra code.

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

Hit command-option-jto open the console. Click the window-looking button on the top right corner of the console to open the console in a different window.

点击command-option-j打开控制台。单击控制台右上角的窗口查看按钮以在不同的窗口中打开控制台。

Then, in the Chrome window, hover over the element that triggers the popover, hit command-`however many times you need to focus on the console, then type debugger. That'll freeze the page, then you can inspect the element in the Elements tab.

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

回答by dwjohnston

F8will pause debugging.

F8将暂停调试。

Mouse over the tooltip, and press F8while it is displayed.

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

You can now use the inspector to look at the CSS.

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

回答by Adam Grant

You would just need to force the tooltip to show as such

您只需要强制工具提示显示为

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

Now the tooltip will show regardless of hovering state.

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

Scroll down near the bottom of the DOM where you should see the markup.

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

Updatesee cneuro's comment for Bootstrap 3.

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

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

Updatesee Marko Gre?ak's answer for Chrome and apparently Safari as well, $0can be used as a shortcut for the currently selected element. This appears to work in Safari as well.

更新参见 Marko Gre?ak 对 Chrome 的回答，显然 Safari$0也可以用作当前选定元素的快捷方式。这似乎也适用于 Safari。

$(
setTimeout(()=> {debugger},5000)
).tooltip('show')

回答by Ali Kleit

Click f12go to the console tab and add the following:

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

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

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

这会给你 5 秒钟的时间来做任何你想做的事情，它会在5 seconds. 然后你可以检查目标元素

(ex. hover the element and wait 5 seconds then inspect..)

（例如，悬停元素并等待 5 秒然后检查..）

回答by mikemaccana

For me, the accepted answer didn't work: clicking in DevTools immediately closed the ToolTip.

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

However, I found https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-executionwhich helped me:

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

1. In the console:, Run: window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; });

2. Highlight element with inspector

3. Hit F12

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

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

3. 按 F12

You can now inspect the element, with JavaScript paused so the DOM won't change.

您现在可以检查元素，JavaScript 暂停，因此 DOM 不会更改。

回答by TobyLL

Single window answer, with no coding

单窗口回答，无需编码

None of the other answers are quite right, or have enough detail, so here's my attempt.

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

• Open Chrome's DevTools using F12/Ctrl+Shift+I (Windows/Linux) or Command+Option+I (Mac).
• Select the Sourcestab in the DevTools window.
• Using the mouse, hover over the element you want to inspect, to make the tooltip visible.
• Press F8 (Windows/Linux/Mac) to pause script execution. The main window will grey out, and a "Paused in debugger" popup will appear.
• In the DevTools window, select the Elementstab
• For Bootstrap tooltips, the tooltip will appear as the last <div>in the <body>

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

回答by clhenrick

No code solution for JS activated tooltips:

JS激活提示框无代码解决方案：

With Chrome's devtools inspect the containing / parent element of the tooltip. In the "elements" tab, right click on that container DOM element then choose "break on" > "subtree modifications". The next time you hover over the part of the DOM the tooltip is housed in, the JS code will be paused allowing you to inspect the contents of the tooltip.

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

回答by Parvez Ahmed

Follow these steps

按着这些次序

1. Open Inspectwindow in chrome.

2. Place the mouse over the tooltip.

3. Press F8

   JS execution will be paused and then you can inspect the tooltip.

4. Press F8again to start execution and F10to debug.

1. Inspect在 chrome 中打开窗口。

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

3. 按 F8

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

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

回答by lxg

Here's a simple solution: If you have dynamic tooltips, you can make them “persistent” by (temporarily) changing the trigger event to click. This will have the effect that the tooltip only disappears on a click-out:

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

##代码##

This way, it can be easily inspected with FF's or Chrome's debugging tools.

这样，可以使用 FF 或 Chrome 的调试工具轻松检查它。