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

Question

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

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

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

Answer 1

能够将 Web Console 的上下文/范围（使用 Ctrl-Shift-K 或 F12 直接打开并选择 Console 选项卡）更改为内容脚本的上下文/范围扩展名似乎不存在。此外，任何其他 在 Firefox 中查看控制台 的方法都不存在此功能。已在 Bugzilla 上提交bug/RFE，请求此功能

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

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

网页调试器

您可以将 Web 调试器（

Ctrl-Shift-S，或 F12 并选择 调试器 选项卡）与 WebExtension 内容脚本结合使用。扩展的内容脚本列在 moz-extension://

 URL 下的“源”中。您需要

识别用于扩展的 UUID。您可以查看变量的内容、设置断点等。但是，这并不能让您显式切换到子框架的上下文。在子 iframe 中运行的 JavaScript 中放置 debugger;

 指令是无效的。

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

Answer 2

一个简单的解决方案是在内容脚本中单击

console.log()

，然后单击源映射链接以查看脚本。如下图：

Answer 3

目前还不可能。有一个错误

实现 UI 用于将上下文切换到内容脚本（自 2017 年 11 月起）为此打开。

Answer 4

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