如何为Firefox插件提供类似Firefox Devtools检查器的功能？

Question

例如：我想查看html代码的哪些部分与网站的特定元素相对应，我将右键单击该元素并打开inspect element，devtools将向我显示相应的代码突出显示。我如何为Firefox插件获得类似的结果，因为当我右键单击扩展名时，没有inspect element这样的选项。

我还尝试使用inspect选项，该选项是通过临时加载插件来获得的，但它仍然没有向我们显示/突出显示相应html文件所引用的扩展部分。有办法吗？

Answer 1

根据扩展名的类型，可以使用Browser Toolbox检查其内容。

首先需要通过切换到DevTools的Settings面板并启用两个选项

启用浏览器镶边和附加调试工具箱和启用远程调试来启用此功能。一旦启用它们，您可以通过Firefox菜单>

Web Developer

> Browser Toolbox或按Ctrl + Alt + Shift]打开浏览器工具箱在Mac上>> I或Cmd + Opt + Shift + I。[此工具箱具有一个与常规DevTools相似的检查器，使您可以检查浏览器镶边。

话虽如此，检查员显然无法检查嵌套在<browser>元素中的文档，例如，对DevTools自身的扩展就是这种情况。