检查新Chrome中的下拉菜单

Question

我使用的是Chrome版本41.0.2272.101 m(最新版本),此更新搞砸了.他们说,当你打开检查器时,任何DOM更改都会在更改的元素上闪烁紫色(如在Firefox中),但现在我无法检查任何悬停的对象(也像在FF中一样,这就是为什么我不喜欢在做前端开发时使用它).

我在谈论js触发事件,例如superfish.之前,我可以将鼠标悬停在菜单上,并使用检查器覆盖菜单,菜单将保持打开状态,我可以在检查器中查看创建的伪元素,直接更改填充等,并查看更改.现在,当我将鼠标悬停在菜单上并右键单击以检查它时,菜单关闭,我无法检查它!

我试过拖过检查员,但没有任何帮助.这个新的"功能"令人讨厌.有没有办法检查js触发的事件,而不在元素上放置断点(这有效,但在屁股上有点痛苦)？

Answer 1

将鼠标悬停在元素上并按F8键(这只适用于Chrome)暂停脚本执行.悬停状态将保持对您可见.如果您使用的是Mac,则可能需要打开系统压力并选中"使用所有F1,F2等"复选框.

Answer 2

根据菜单元素类型,我遇到了下拉输入菜单的问题.我检查它的原因是消失是因为blur当我点击元素外的任何地方时,总是在元素上触发事件.

我能够检查元素的一种方法是通过删除模糊事件监听器来防止触发模糊事件:

• 检查chrome上的输入元素
• 转到"事件侦听器"选项卡并删除模糊事件

删除模糊事件后,现在您可以打开菜单并检查它而不会消失

Answer 3

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

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

Answer 4

在chrome中，如果您单击F12打开开发人员控制台，然后单击设置 开发工具设置

最后检查“模拟重点页面” 检查 “模拟重点页面” 选项

Answer 5

在Mac上,您可以在打开下拉列表后按cmd+ \以暂停脚本.然后,您可以使用shift+ cmd+ c来检查元素.

Answer 6

我只是使用了模拟一个焦点页面，它的效果就像一个魅力

1. 前往设置
2. 转到更多工具
3. 查找渲染
4. 找到“模拟焦点页面”并单击单选按钮

voala 现在您可以检查您的选择元素

Answer 7

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

我遇到了同样的问题，我使用的是chrome 开发工具上的Expand recursively选项：

步骤是：

1. 检查下拉字段
2. 找到动态 DOM（紫色高亮部分）
3. 鼠标右键单击该动态 DOM
4. 选择扩展递归：
5. 我们可以看到所有元素都在那里

这是一个演示：

Answer 8

在火狐浏览器中

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

中断... > 子树修改

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

Answer 9

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

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

DevTools >> Elements >> "Kebab" 菜单（设置齿轮旁边的 3 个垂直点）>> More tools >> Rendering。

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