如何在 Firefox 的 Inspector 中检查附加面板的内容？答案

【问题标题】：How can I inspect the contents of an add-on panel in Firefox's Inspector?如何在 Firefox 的 Inspector 中检查附加面板的内容？
【发布时间】：2015-09-29 04:25:14
【问题描述】：

我正在为 Firefox 创作一个插件，当用户单击插件栏中的按钮时会生成一个面板。

在 Chrome 中，我的弹出窗口呈现我想要的方式，但我可以右键单击弹出窗口并从上下文菜单中选择“检查元素”来调试呈现。

在 Firefox 中，面板呈现异常，但右键单击它并没有给我一个上下文菜单。从附加选项卡中选择调试允许我查看内容脚本并设置断点，但那里也没有检查器。

【问题讨论】：

标签： firefox-addon firefox-addon-sdk

【解决方案1】：

当您处于开发者模式时，chrome 中的“检查元素”可能是可见的，对吧？

我还不确定 Firefox 检查器，但可以使用： https://addons.mozilla.org/en-us/firefox/addon/dom-inspector-6622/

然后这个检查器的插件叫做： https://addons.mozilla.org/en-US/firefox/addon/element-inspector/

这个插件真的可以捕捉上下文菜单和其他临时显示的元素。 Shift + 右键单击，它将在检查器中弹出。

这个 DOM INspector 是我们在 firefox devtools 出现之前的做法。肯定有办法的，只是还没有探索太多。

【讨论】：

感谢您的快速回复。这确实有效，但是 DOM Inspector 插件远没有我希望的那样功能齐全。我试图找出放置和尺寸问题，并且该检查器仅提供非常简单的层次结构和指定的属性信息。至少我可以看到 DOM 正在正确生成。
@danBhentschel 单击下拉菜单并转到 css，它实际上超级强大。甚至可以进入 xbl :) 甚至可以对匿名元素进行实时编辑。它的精湛。但是你看不到像firefox工具这样的附加事件，这是firefox工具的一个超级棒的功能
谢谢。你是对的。我没有注意到那个下拉菜单。我现在可以在弹出窗口中查看详细信息了。