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

Question

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

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



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

Answer 1

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

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



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

网页调试器

您可以将 Web 调试器(Ctrl-Shift-S 或 F12 并选择“调试器”选项卡)与 WebExtension 内容脚本一起使用。扩展的内容脚本在 moz-extension:// 下的“来源”中列出。网址。您将需要 identify the UUID that is used for the extension .您可以查看变量的内容、设置断点等。但是，这并不能让您显式切换到子框架的上下文。配售debugger;在子 iframe 中运行的 JavaScript 中的指令无效。

Web Debugger 调试内容脚本(在顶部框架中):



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

如果您想打开一个位于 WebExtensions 后台脚本上下文中的控制台，您可以通过单击 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 中。