134

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

有任何想法吗？

4

24 回答 24

160

F8将暂停调试。

在 Mac 上，您可能需要打开开发人员工具的“源”选项卡。

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

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

于 2016-07-29T03:38:31.567 回答
101

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

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

于 2013-03-12T20:05:51.483 回答
86

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

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

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

于 2014-08-06T17:54:38.237 回答
67

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

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

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

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

更新见 cneuro 对 Bootstrap 3 的评论。

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

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

$($0).tooltip('show')
于 2013-10-30T14:53:27.663 回答
47

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

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

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

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

于 2019-08-15T11:31:01.990 回答
29

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

但是，我发现https://superuser.com/questions/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 就不会改变。

于 2013-07-16T12:47:41.450 回答
26

单窗口答案，无需编码

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

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

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

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

于 2018-07-03T17:33:32.413 回答
5

跟着这些步骤

  1. 在 chrome 中打开Inspect窗口。

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

  3. 按F8

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

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

于 2019-09-19T10:39:35.030 回答
5

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

第 1 步：检查具有工具提示的元素。确保它在 devtools 中以蓝色突出显示。

第 2 步：右键单击元素（在 devtools 部分中）并选择：属性修改，在 Break on 下 在此处输入图像描述

第 3 步：将鼠标悬停在被检查的元素上，网站上会出现一个灰色叠加层，上面有一个小文本：在调试器中暂停

在此处输入图像描述

在屏幕顶部

第 4 步：单击蓝色箭头，直到选择悬停状态。

第 5 步：检查和编辑工具提示

于 2020-03-23T12:37:59.050 回答
4

将鼠标悬停在元素上，按 F8 稍长一点，它将暂停脚本执行。

于 2021-02-03T17:47:38.593 回答
3

这是一个简单的解决方案：如果您有动态工具提示，则可以通过（临时）将触发事件更改为click. 这将产生工具提示仅在单击时消失的效果：

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

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

于 2015-11-28T11:17:47.937 回答
3

1) 点击 F12 打开 Inspect 窗口

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

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

4）使用键盘（Tab 或 shift+tab）将控件移动到暂停按钮或 F8参考图像

5）当键盘焦点在播放按钮上时。点击进入。你的悬停元素将被冻结你现在可以做任何事情

于 2019-03-11T07:10:37.130 回答
3

这是我在 Mac 上的做法：

  1. 将鼠标悬停在具有打开 chrome devtools 的工具提示的元素上。
  2. 等待工具提示出现。
  3. 使用键盘快捷键打开 devtools 命令面板。Cmd+Shift+P为我工作。
  4. 输入Disable JavaScript并按下Enter

这将防止所有使用 JavaScript 的工具提示消失。

于 2020-08-20T11:54:33.197 回答
2

只需在控制台中点击一行脚本，然后按任意键即可进入调试模式。

window.onkeydown = () => { debugger }
于 2021-03-04T07:51:31.703 回答
1

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

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

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

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

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

在父元素上设置中断

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

希望它对某人有用！

于 2019-08-19T14:09:17.327 回答
1
  1. 通过鼠标显示悬停的项目
  2. 窗口 --> Ctrl + shift + c || Mac --> Command + Option + C
于 2021-05-10T04:14:27.303 回答
0

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

于 2015-10-01T01:23:53.710 回答
0

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

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

如果您需要在鼠标移开时保持提示打开，以便能够在另一个窗口中更彻底地检查它，请右键单击工具提示并保持上下文菜单处于打开状态，然后单击开发工具窗口。在这种情况下，它会将提示留在维基百科窗口中。

在某种程度上，它也适用于引导提示。

于 2017-02-07T15:12:09.927 回答
0

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

于 2017-08-03T18:35:10.477 回答
0

我为这个问题找到的另一个解决方案。通过 Chrome 中的移动设备或平板电脑视图，在 Chrome 开发工具中按Crt + Shift + M以在 Chrome 中查看移动设备视图。在 ToolTip div 上单击（Tap），您可以通过右键单击工具提示来检查它

于 2020-05-22T05:18:36.597 回答
0

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

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

于 2020-05-31T16:41:30.977 回答
-1

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

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

在这种情况下，@joeyyang 的回答对我来说效果很好。

于 2017-01-20T15:32:17.673 回答
-3

我发现的最简单的方法之一是：

  1. 打开侧面的 Chrome 开发工具

  2. 将鼠标悬停在元素上

  3. 右键点击

  4. 点击开发工具

  5. 现在您可以检查和更改样式

于 2019-10-25T07:43:36.743 回答