检查新 Chrome 中的下拉菜单答案

【问题标题】：Inspecting drop down menus in new Chrome检查新 Chrome 中的下拉菜单
【发布时间】：2015-06-05 19:46:39
【问题描述】：

我使用的是 Chrome 版本 41.0.2272.101 m（最新），这个更新搞砸了。他们说，当您打开检查器时，任何 DOM 更改都会在更改的元素上以紫色闪烁（就像在 Firefox 中一样），但现在我无法检查任何悬停的对象（也像在 FF 中一样，这就是我不喜欢的原因做前端开发时使用）。

我说的是 js 触发的事件，例如 superfish。以前，我可以悬停菜单，然后用检查器覆盖菜单，菜单会保持打开状态，我可以进入检查器查看创建了哪些伪元素，直接更改填充等，然后查看更改。现在，当我将鼠标悬停在菜单上并右键单击以检查它时，菜单会关闭，我无法检查它！

我尝试将检查员拖过来，但没有任何帮助。这个新的“功能”很烦人。有没有办法检查 js 触发的事件，而不在元素上设置断点（这可行，但有点麻烦）？

【问题讨论】：

标签： google-chrome

【解决方案1】：

我认为您可以使用 Chrome 中的 CSS 编辑器来应用状态，例如“悬停”状态。

在开发者工具中，您选择一个元素。在右手边，你有一个正方形，上面有一个箭头。单击它，您可以选择一个状态。例如，选择 hovered，你会看到你的窗口和 CSS 都更新了，就好像元素现在被悬停了一样。

【讨论】：

是的，但这只会触发您手动设置为element:hover、element:active 或element:focus 的css 状态。我的更改是基于 js 的。插件将添加一个类，并更改样式（例如 superfish 所做的）。所以状态切换在这里无济于事......

【解决方案2】：

将鼠标悬停在元素上并按 F8（这仅适用于 Chrome）暂停脚本执行。悬停状态将保持对您可见。如果您使用的是 Mac，则可能需要打开系统偏好设置并选中“使用所有 F1、F2 等”复选框（或者只需使用 fn + F8）。

有时它仅在您位于检查器的“源”选项卡中时才有效。

*是的，您应该在源选项卡中，并且最重要的是您应该在按 F8(win) 或 Fn+F8(mac) 之前关闭源选项卡中所有打开的选项卡。 *

【讨论】：

我认为他们同时解决了这个问题。我可以添加一个断点，我知道，但更简单的解决方案是悬停，带上检查器并在悬停时在检查器中摆弄，并且整个站点不会冻结。
在 Mac 上，您只需按 fn+F8，而您的检查器在 Sources 选项卡上打开
最近按F8后，悬停先消失然后停止执行。令人难以置信的令人沮丧，不知道为什么会发生这种情况。
也许这很明显，但我必须在“来源”选项卡上才能工作。 OSX 和 chrome (74.0.3729.157)
如果即使打开“源”选项卡也无法使用快捷方式，只需直接在“源”选项卡中单击“暂停”按钮

【解决方案3】：

在 Mac 上，您可以在打开下拉菜单后按 cmd+\ 暂停脚本。然后您可以使用 shift+cmd+c 来检查元素。

【讨论】：

太棒了！注意：您必须首先在开发工具中的 Sources 选项卡上。否则，当您按 cmd-\ 时，悬停会关闭，因为它会将您带到那里。

【解决方案4】：

您可以设置一个间隔，每秒在 JS 控制台中写出给定元素的内容。将此放在控制台中并打开下拉菜单。

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

【讨论】：

完美的反应选择

【解决方案5】：

根据菜单元素类型，我在下拉输入菜单中遇到了这个问题。当我检查它时它消失的原因是，当我单击元素外的任何位置时，总是会在元素上触发 blur 或 focusout 事件。

我能够检查元素的一种方法是防止这些事件被触发，即删除它们的事件侦听器：

检查 Chrome 上的输入元素
转到事件侦听器选项卡并删除blur 或focusout 事件

一旦事件监听器被移除，你可以打开菜单并检查它而不会消失

【讨论】：

这可能适用于输入元素。我刚刚尝试了一个选择元素，它仍然消失了
你是救星??
有时输入也可以绑定到focusout 事件而不是blur。在某些情况下，删除 focusout 对我有用
这应该是答案

【解决方案6】：

现在，当我将鼠标悬停在菜单上并右键单击以检查它时，菜单关闭，我无法检查它！

我遇到了同样的问题，我使用的是 Chrome 开发工具上的 递归扩展 选项：

步骤如下：

检查下拉字段
查找动态 DOM（紫色突出显示）
鼠标右键单击该动态 DOM
选择递归扩展：
我们可以看到所有元素都在那里

这是一个演示：

【讨论】：

【解决方案7】：

在 Chrome 中，按 F12 打开开发者控制台，然后点击设置（齿轮图标）或按 F1：

然后找到并选中“模拟焦点页面”选项。

【讨论】：

谢谢，这是迄今为止最简单最简单的答案
这是 imo 正确答案。花了很长时间才找到，并且省去了很多折磨，这真是难得的黄金。
这是没有任何技巧的最佳答案。纯金
这是最简单的选项，但似乎已从 Chrome 86 版本开始删除:(
它还在，只是搬到了另一个地方：stackoverflow.com/a/64456947/1440076

【解决方案8】：

在 Firefox 中

在 Inspector 中，右键单击包含下拉列表的节点，选择：

Break on... > 子树修改

这将在下拉列表...好吧...下拉的那一刻暂停执行。

【讨论】：

【解决方案9】：

以上提到的补救措施都不适合我。因为我们的下拉菜单（基于 React）将在任何单击（右或左）时关闭所以我们找到了以下解决方法：

在 Chrome 打开开发者工具中
首先单击处于折叠状态的下拉菜单，然后使用选项展开
然后在 element 部分下，右键单击 div 节点（确保在右键单击之前不要单击左键），其中包含下拉项的详细信息
然后选择选项'递归扩展'
然后显示所需的详细信息

【讨论】：

【解决方案10】：

在上面添加“在Chrome中，按F12打开开发者控制台，然后点击设置（齿轮图标）或按F1：”；

在 Chrome 86 及更高版本中，您可以在此处找到“模拟焦点页面”选项：

DevTools >> Elements >> “Kebab”菜单（设置 cog 的 3 个垂直点） >> More tools >> Rendering.

或者：打开 Devtools：按 CTRL/CMD+SHIFT P 打开命令菜单 HUD，输入“emulate a fo”缩小搜索结果，然后输入（或单击）切换设置。

【讨论】：

您好 Ben，欢迎来到 Stack Overflow。感谢您的贡献！这个答案看起来像是对现有答案的有用补充。您能否编辑以前的答案以包含此详细信息，然后删除此答案？谢谢。

【解决方案11】：

对我有用的唯一方法是在控制台中执行 setTimeout(() => { debugger }, 3000) 并在超时运行时打开下拉菜单。

在开发工具 UI 中按暂停按钮或 F8 键暂停脚本执行都会关闭菜单。

【讨论】：

哈哈，这是一个聪明的 hack ?

【解决方案12】：

在 Windows 上，首先在带有菜单的页面上按 F12，然后将鼠标指向元素菜单（菜单将下拉），然后按 CTRL + Shift + C。现在您可以检查所有元素。

【讨论】：