在新的 Chrome 浏览器中检查下拉菜单

我使用的是 Chrome Version 41.0.2272.101 m (最新版本) ，这次更新搞砸了。他们说，当你打开检查器时，任何 DOM 变化都会在变化的元素上闪现紫色(像 Firefox) ，但是现在我不能检查任何悬浮的对象(也像 FF，这就是为什么我不喜欢在前端开发时使用它)。

我说的是 js 触发的事件，比如超级鱼。在此之前，我可以悬浮在菜单上，用检查器覆盖菜单，这样菜单就保持打开状态，我可以进入检查器查看创建了什么伪元素，直接修改填充等等，然后看到修改。现在，当我鼠标悬停在菜单上，右键查看时，菜单就关闭了，我无法查看它！

我试着把检查员拉过来，但没用。这个新的“功能”非常烦人。有没有一种方法可以检查 js 触发的事件，而不需要在元素上设置断点(这种方法有效，但是有点麻烦) ？

135636 次浏览
小开

我认为你可以在 Chrome 中使用 CSS 编辑器来应用一个状态，例如，“ hover”状态。

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

小开
最佳答案

用鼠标悬停在元素上方，然后按 F8(这只能在 Chrome 中使用)来暂停脚本的执行。悬停状态将保持可见。如果你在 Mac 上，你可能需要打开系统首选项并勾选“ Use all F1，F2，etc”复选框(或者简单地使用 fn + F8)。

有时只有在检查器的“来源”选项卡中才有效。

Yes，you should be in the source tab and 最重要的是，在按 F8(win)或 Fn + F8(mac)之前，您应该关闭“来源”选项卡中所有打开的选项卡

小开

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

小开

您可以设置一个间隔，该间隔每秒写出 JS 控制台中给定元素的内容。把这个放到控制台中，然后打开下拉菜单。

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

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

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

  • 检查 Chrome 上的输入元素
  • 转到 Event Listener 选项卡并删除 blur或 focusout事件 enter image description here

一旦删除了事件侦听器，您就可以打开菜单并检查它，而不会消失

小开

现在，当我把菜单悬停在空中，右键查看菜单 关门了，我没法检查！

我遇到了同样的问题，我在 chrome 开发工具上使用的是 递归展开选项:

步骤如下:

  1. 检查下拉区域
  2. 查找动态 DOM (紫色突出显示)
  3. 鼠标右键单击该动态 DOM
  4. 选择 递归展开: enter image description here
  5. 我们可以看到所有的元素都在那里

下面是一个演示:

enter image description here

小开

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

Dev tools Settings

然后查找并检查“模拟聚焦页面”选项。

Check Emulate a Focused Page Option

更新: 正如注释中提到的，此选项现在位于另一个位置。请参阅 这个答案。

小开

在 Firefox 中

在“检查器”中，右键单击包含下拉列表的节点，选择:

继续... > 子树修改

这将暂停执行的时候下拉是... 嗯... 下拉。

小开

以上提到的方法对我都不管用。 因为我们的下拉菜单(反应为基础)将关闭任何单击(右或左) 因此，我们找到了下面的解决办法:

  • 在 Chrome 中开放开发工具
  • 首先点击折叠状态下的下拉菜单，并让它展开选项
  • 然后在 element 部分下，右键单击 div 节点(确保在右键单击之前不要左键单击) ，该节点包含下拉项的详细信息
  • 然后选择选项‘ 递归扩展’
  • 然后要求的细节被显示 enter image description here
小开

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

在 Chrome86及以上版本中，你可以在这里找到“模拟一个焦点页面”选项:

DevTools > > Elements > > “ Kebab”菜单(设置齿轮上的3个垂直点) > > More tools > > Rendering。

或者: 打开 Devtools: 点击 CTRL/CMD + SHIFT P 打开命令菜单 HUD，输入“仿真一个 fo”来缩小搜索结果，然后输入(或点击)来切换设置。

小开

对我来说，唯一可行的方法是在控制台中执行 setTimeout(() => { debugger }, 3000)，并在超时运行时打开下拉列表。

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

小开

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

小开

我只是模仿了一个集中的页面，它工作起来像一个魅力

  1. 进入设置
  2. 去找更多的工具
  3. 找到渲染
  4. 找到“模拟聚焦页面”并单击单选按钮

现在你可以检查你的选择元素


提交答案