The ability to change the context/scope of the Web Console https://developer.mozilla.org/en-US/docs/Tools/Web_Console (opened directly with Ctrl-Shift-K or F12 and selecting the Console tab) to that of the content scripts for an extension does not appear to exist. In addition, this capability does not exist in any of the other ways to view a console in Firefox https://stackoverflow.com/a/38920982/3773011. A bug/RFE should be filed https://bugzilla.mozilla.org/enter_bug.cgi on Bugzilla requesting this functionality; it would be quite useful. You will want the RFE to clearly explain that there should be the ability to switch to the content script context/scope for each frame in the tab (i.e. the top frame and each child frame). This should be the case for both the Console and the Debugger.
注意：您可以通过从框架选择器下拉列表中打开的下拉菜单中选择框架，将控制台更改为 iframe 页面脚本的上下文/范围：
如果您没有出现此下拉图标，请转到 DevTools 设置并选中“选择 iframe 作为当前目标文档”。但是，执行此操作 A) 不会切换到内容脚本上下文/范围，并且 B) 无法与 Web 调试器一起正常工作（在当前版本的 Firefox 和 Nightly (54.0a1) 中进行测试）。
网页调试器
You can use the Web Debugger (Ctrl-Shift-S, or F12 and selecting the Debugger tab) with WebExtension content scripts. The content scripts for the extension are listed in the "Sources" under a moz-extension:// URL. You will need to identify the UUID that is used for the extension https://stackoverflow.com/a/41880678/3773011. You can view the content of variables, set breakpoints, etc. However, this does not give you the ability to explicitly switch to the context of the child frame. Placing debugger; directives in the JavaScript which is running in the child iframe is ineffective.
Web 调试器调试内容脚本（在顶部框架中）：
后台脚本上下文中的控制台
If you were wanting to open a console which was in the context of your WebExtensions' background script, you could do so by clicking on the Debug button for your extension in about:debugging. However, this will not get you access to a console in the content script's context.
在 iframe 中查看变量值的解决方法
满足您的需要：明确指示值位于 iframe 上下文中，而不是顶部框架中；我看到有两种方法：
-
Use console.log()前面附加的信息清楚地表明该脚本believes它在 iframe 中运行。例如：
console.log('In iframe', 'foo=', foo);
这样你就不必拥有'In iframe'在每次通话中console.log()您可以创建一个函数，将该文本添加到对该函数的所有调用之前。你甚至可以覆盖console.log()函数，所以你的代码仍然只是调用console.log().
但是，这仅告诉您您的代码认为它正在 iframe 中运行。您可能正在调试的部分内容是检测内容脚本代码是否位于 iframe 中。
该方法并不能确定报告的值是actually在 iframe 中。
-
使用以下方法将值存储到 DOM 中元素数据集 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset或其他 DOM 元素属性，然后检查 DOM 中的这些值。要查看这些属性，我发现DOM 检查器 https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/非常清楚地显示了这些：
该方法可用于明确显示这些值是 iframe 中的值，以及具体是哪个 iframe，而无需依赖 iframe 中运行的代码来准确确定它位于 iframe 中以及位于哪个 iframe 中。
