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

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

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

---

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

在Firefox开发者版中，进入“关于：调试”页面，单击加载项旁边的“调试”按钮以打开开发工具。

更改的上下文/范围的能力（使用Ctrl-Shift-K或F12直接打开并选择控制台选项卡）扩展的内容脚本似乎不存在。此外，这种能力在任何其他方式中都不存在。请求此功能的Bugzilla上的一个实例；这将非常有用。您希望RFE清楚地解释，对于选项卡中的每个帧（即顶部帧和每个子帧），应该能够切换到内容脚本上下文/范围。控制台和调试器都应该如此

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

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

Web调试器 您可以将Web调试器（Ctrl-Shift-S或F12并选择“调试器”选项卡）与WebExtension内容脚本一起使用。扩展的内容脚本列在“源”中在

moz扩展名下：//

URL。您需要。您可以查看变量的内容，设置断点等。但是，这并不能让您显式切换到子框架的上下文。将

debugger；

指令放在子iframe中运行的JavaScript中是无效的

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

后台脚本上下文中的控制台 如果您想打开WebExtensions背景脚本上下文中的控制台，可以通过单击

关于：调试

中扩展的调试按钮来完成。但是，这将无法访问内容脚本上下文中的控制台

在iframe中查看变量值的变通方法 对于您需要的内容：明确地指示值在iframe上下文中，而不是在顶部框架中；我看到了两种方法：

• 使用

  console.log（）

  ，并在前面添加明确指示脚本认为它正在iframe中运行的信息。例如：

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

  因此，您不必在每次调用

  console.log（）

  时都在iframe中使用

  ，
  ，您可以创建一个函数，将该文本预先添加到对该函数的所有调用中。您甚至可以覆盖
  console.log（）
  函数，以便您的代码仍然只调用
  console.log（）
  
  但是，这只是告诉您，您的代码认为它正在iframe中运行。您可能正在调试的部分内容是您的内容脚本代码检测到它在iframe中
  
  此方法不能确定报告的值实际上在iframe中
  

• 使用或其他DOM元素属性将值存储到DOM中，然后检查DOM中的这些值。要查看这些属性，我发现
  此方法可用于明确显示值是iframe中的值，以及确切的哪个iframe，而无需依赖iframe中运行的代码来准确确定它是否在iframe中以及它在哪个iframe中

---

一个简单的解决方案是只需在内容脚本中添加

console.log（）

，然后单击sourcemap链接查看脚本。如下所示：

---

这还不可能。为此打开了一个bug（自2017年11月起）。

请定义“访问它们”的含义（例如，您是指在调试器中查看（只需切换到调试选项卡）？在该上下文中在控制台中输入JavaScript？或其他内容？）。请记住，您所称的浏览器控制台实际上是Web控制台。（Ctrl-Shift-J或OSX上的Cmd-Shift-J）对Firefox有特定的含义。有，每个都有其适当的用途。@Makyen By access，我的意思是，例如，我可以在控制台的内容脚本中输入定义的全局变量，它将输出其值。在调试器中查看变量的值是否足够？您可以通过在“调试器”选项卡中选择代码文件来实现。更明确地说：您需要的是只能通过在控制台中输入代码行并在内容脚本的上下文/范围内执行才能处理的东西吗？@Makyen我的扩展对iFrame不起作用。首先，我想确定iFrame是否加载了我的内容脚本（通过检查内容脚本控制台中是否存在全局变量）。调试器中的视图变量可能不明确，因为我不知道我在哪里（我在页面中吗？我在iframe中吗？），我看不到一个很好的解决方案，完全符合您的要求（您应该这样做。我仍然不确定您真正想要做的是什么，除了区分主框架/iframe之间的值。根据您的描述，我可能会尝试使用在DOM中设置信息。这些信息然后在中。这将打开控制台以了解扩展的背景。）