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

Question

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

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

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

Answer 1

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

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

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

网页调试器

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

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

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

如果你想打开控制台这是您的WebExtensions的背景剧本的情况下，你可以通过点击这样做Debug对你的扩展按钮about:debugging。但是，这不会让您访问内容脚本上下文中的控制台。

在 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，而无需依赖 iframe 中运行的代码来准确确定它在 iframe 中以及它在哪个 iframe 中。