如何在Firefox控制台中访问附加内容脚本？

Question

我为Firefox和Chrome开发了一个附加组件。它有内容脚本。我想在浏览器标签的控制台中访问它们（在Web Console的Firefox上）。例如，我想输入在控制台的内容脚本中定义的全局变量，它将输出其值。

在Chrome中，我可以通过按 F12 打开控制台，然后导航到开发人员工具中的控制台选项卡。它在过滤器按钮后面有一个Dropbox，用于选择我所在的上下文（页面/内容脚本）：

在Firefox中，如何做同样的事情？

Answer 1

能够更改Web Console的上下文/范围（直接使用 Ctrl - Shift - K 或< kbd> F12 并选择控制台选项卡）到扩展名的内容脚本的选项似乎不存在。此外，view a console in Firefox的任何其他方式都不存在此功能。 Bugzilla上的bug/RFE should be filed请求此功能;这会非常有用。您将希望RFE清楚地解释应该能够切换到选项卡中每个帧的内容脚本上下文/范围（即顶部框架和每个子框架）。这应该是Console和Debugger的情况。

注意：您可以通过从框架选择器下拉列表中打开的下拉菜单中选择框架，将控制台更改为iframe页面脚本的上下文/范围：

如果没有显示此下拉图标，请转到DevTools设置并选中＆＃34;选择iframe作为当前目标文档＆＃34;。但是，执行此操作A）不会切换到内容脚本上下文/范围，并且B）无法与Web调试器一起正常工作（在当前版本的Firefox和Nightly（54.0a1）中进行测试。

Web调试器

您可以使用Web调试器（ Ctrl - Shift - S 或 F12 并选择<带有WebExtension内容脚本的kbd> Debugger 选项卡。扩展程序的内容脚本列在＆＃34;来源＆＃34;在moz-extension://网址下。您需要identify the UUID that is used for the extension。您可以查看变量的内容，设置断点等。但是，这并不能让您显式切换到子框架的上下文。将debugger;指令放在子iframe中运行的JavaScript中是无效的。

Web调试器调试内容脚本（在顶部框架中）：

后台脚本上下文中的控制台

如果您想要打开一个位于WebExtensions环境中的控制台。后台脚本，您可以通过单击about:debugging中的扩展程序的 Debug 按钮来执行此操作。但是，这不会让您在内容脚本的上下文中访问控制台。

在iframe

中查看变量值的变通方法

根据您的需要：明确指出值位于iframe上下文中，而不是顶部框架;我看到两种方法：

• 使用console.log()前面的信息清楚地表明脚本相信它正在iframe中运行。例如：

  console.log('In iframe', 'foo=', foo);
  

  因此，在每次调用'In iframe'时，您都不必拥有console.log()，您可以创建一个函数，将该文本添加到该函数的所有调用中。您甚至可以覆盖console.log()功能，因此您的代码仍会调用console.log()。

  但是，这只会告诉您代码认为它在iframe中运行。您可能正在调试的部分内容是检测到它位于iframe中的内容脚本代码。

  此方法并未明确表示iframe中报告的值实际。

• 使用Element.dataset或其他DOM元素属性将值存储到DOM中，然后检查DOM以获取这些值。要查看这些属性，我发现DOM Inspector非常清楚地显示了这些属性：

  

  此方法可用于明确显示值是iframe中的值，以及iframe中的if，而不依赖于iframe中运行的代码来准确确定它是否位于iframe中以及iframe中的iframe。

Answer 2

一个简单的解决方案是仅在内容脚本中使用console.log()，然后单击sourcemap链接以查看该脚本。如下图所示：

Answer 3

这还不可能。 （自2017年11月以来）已打开一个错误Implement UI for switching context to content script。

Answer 4

在Firefox Developer Edition中，继续“about：debugging”页面并单击加载项旁边的“Debug”按钮以打开开发工具。