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

Question

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

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

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

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

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

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

编辑：
多次按TAB键，有时会关注“检查器”选项卡。有时它只是循环遍历网站中的元素，从不关注Inspector选项卡。即便如此，我能够使用TAB专注于Inspector选项卡的时间，按下TAB大约20次后弹出菜单消失了所以我需要一个不使用TAB键的不同方法。

Answer 1

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

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

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

现在，问题变成了：这个时间点是什么，你怎么能在那里设置一个断点。

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

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

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

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

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