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

Question

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

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

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

Answer 1

似乎不存在将Web 控制台的上下文/范围（使用Ctrl - Shift - K或F12直接打开并选择控制台选项卡）更改为扩展内容脚本的上下文/范围的能力。 此外，在 Firefox 中查看控制台的任何其他方式都不存在此功能。 应在 Bugzilla上提交请求此功能的错误/RFE ； 这将是非常有用的。 您将希望 RFE 清楚地说明应该能够切换到选项卡中每个框架（即顶部框架和每个子框架）的内容脚本上下文/范围。 控制台和调试器都应该是这种情况。

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

如果此下拉图标没有出现，请转到 DevTools 设置并选中“选择 iframe 作为当前目标文档”。 但是，这样做 A) 不会切换到内容脚本上下文/范围，并且 B) 不能与 Web 调试器一起正常工作（在当前版本的 Firefox 和 Nightly (54.0a1) 中进行测试）。

网页调试器

您可以将 Web 调试器（ Ctrl - Shift - S或F12并选择调试器选项卡）与 WebExtension 内容脚本一起使用。 扩展的内容脚本列在moz-extension:// URL 下的“来源”中。 您需要确定用于扩展的 UUID 。 您可以查看变量的内容、设置断点等。但是，这不会使您能够显式切换到子框架的上下文。 放置debugger; 在子 iframe 中运行的 JavaScript 中的指令无效。

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

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

如果您想打开位于 WebExtensions 后台脚本上下文中的控制台，您可以通过单击about:debugging扩展程序的Debug按钮来实现。 但是，这不会让您访问内容脚本上下文中的控制台。

在 iframe 中查看变量值的解决方法

对于您需要的：明确指出值在 iframe 上下文中，而不是在顶部框架中； 我看到这样做的两种方法：

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

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

  因此，您不必在每次调用console.log()都使用'In iframe' ，您可以创建一个函数，将该文本添加到对该函数的所有调用之前。 您甚至可以覆盖console.log()函数，这样您的代码仍然只调用console.log() 。

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

  此方法并不能确定报告的值实际上在 iframe 中。

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

  

  该方法可用于明确显示值是 iframe 中的值，以及确切显示是哪个 iframe，而无需依赖 iframe 中运行的代码来准确确定它在 iframe 中以及它在哪个 iframe 中。

Answer 2

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

Answer 3

这还不可能。 有一个错误实现 UI，用于将上下文切换到为此打开的内容脚本（自 2017 年 11 月起）。

Answer 4

在 Firefox Developer Edition 中，进入“about:debugging”页面并单击附加组件旁边的“Debug”按钮以打开开发工具。