如何将焦点切换到 Firefox Web Tools 中的 Inspector 选项卡？

Question

网站中的按钮在单击时会触发弹出菜单（仅在单击时，而不是在悬停时）。我希望能够检查这个弹出菜单，但是在我右键单击它并选择“检查元素”后，它消失了，所以我不能再检查它了。

当弹出菜单显示时，我可以看到它的条目出现在 Inspector 选项卡的 HTML 中，但是当我单击条目时，弹出菜单消失，HTML 条目也是如此。

对于当按钮悬停（未单击）时出现菜单的情况，我会单击 Inspector 选项卡中的一个条目以将焦点切换到它，然后我只需将鼠标悬停在按钮上并使用箭头键进行导航检查器选项卡中的条目。但是由于需要单击此按钮，因此我失去了对 Inspector 选项卡的关注。

我认为这可以通过将焦点切换到 Firefox 的 Web 工具中的 Inspector 选项卡而不单击任何内容来解决。

我尝试使用不同的快捷方式，例如 Ctrl+Shift+C 或 Ctrl+Shift+I（打开 Web 工具），但我无法将焦点切换到 Inspector 选项卡以浏览 HTML使用这些快捷方式后。

我也尝试过使用检查模式（检查器选项卡左侧的按钮），它可以让我检查我点击的任何内容。这种方法的问题在于，要进入菜单，我需要先单击一个按钮，而检查模式只检查我单击的第一件事。也许有一种方法可以在检查模式下忽略第一次点击？

编辑：
多次按 TAB 键，有时会集中在 Inspector 选项卡上。有时它只是循环浏览网站中的元素，从不关注 Inspector 选项卡。即便如此，当我能够使用 TAB 专注于 Inspector 选项卡时，按 TAB 大约 20 次后弹出菜单消失了，所以我需要一种不使用 TAB 键的不同方法。

Answer 1

我有一个 deviantart 帐户，因此我能够重现您描述的问题。

问题是当窗口模糊或页面被点击时，点击时出现的弹出窗口被隐藏。而且因为聚焦检查器总是会导致内容窗口模糊，所以您无法在保持弹出窗口显示的同时切换到检查器。

因此，正如@Callahad 在评论中所说，这里唯一可行的选择是使用断点强制 javascript 代码在某个时间点暂停，这样您就可以检查弹出窗口而不会在您的下方关闭它。

现在，问题变成了：这个时间点是什么，如何在此处设置断点。

• 出现弹出窗口时：单击编辑按钮的元素时会发生这种情况。如果您可以在调试器面板中的这一行添加断点，那么您将能够单击编辑按钮，并逐步执行代码，直到显示弹出窗口，然后再次切换到检查器进行检查.不幸的是，此事件的 javascript 事件处理程序位于节点的 onclick 属性中，您无法在此处设置断点。
• 即将隐藏弹出窗口时。这发生在窗口模糊上。要在此处设置断点，您可以尝试按照以下步骤操作：
  • 在检查器中找到 html 元素（即显示添加到窗口的事件的元素），
  • 点击旁边的 [ev] 图标，
  • 在出现的列表中找到“blur”事件，
  • 单击它旁边的调试器图标，这会将您带到右侧的调试器，希望如此
  • 如果需要，可以使用调试器左下角的 {} 按钮漂亮地打印代码
  • 在此代码的正确位置添加断点
  • 然后只需单击以显示弹出窗口，然后在窗口外单击，这将暂停您添加断点的 javascript 执行，即在弹出窗口隐藏之前，因此您有机会切换到检查器并在弹出窗口关闭之前对其进行检查。
• 弹出窗口也会在页面点击时隐藏，因此您可以通过查看此事件来做同样的事情。

另一种有效的方法可能是：

覆盖隐藏弹出窗口的代码！ Javascript 是动态的，所以你完全可以把它变成你的优势。在deviantart代码中找到隐藏popup的函数，修改一下。 通过快速查看 Web 控制台中窗口对象上的内容，我很幸运地发现：Popup2.hideAll。因此，如果您只是在 Web 控制台中运行此命令：Popup2.hideAll = function(){}，然后打开弹出窗口，它将一直停留在那里并且永远不会再次隐藏，直到您重新加载页面。这为您提供了一种检查它的好方法。

最后，像这样处理 DOM 更改的一种非常好的方法是在 devtools 中具有“中断 DOM 突变”功能。 Firebug 有这个，Chrome devtools 也有，不幸的是Firefox doesn't yet。

这个功能的想法很简单，在检查器中：右键单击任何节点（在这种情况下，弹出窗口将出现在 DOM 中的父元素），选择“break on mutation”，然后单击打开弹出窗口。当弹出窗口插入 DOM 时，devtools 会看到并自动停止 javascript 执行。