如何访问 Firefox 控制台中的附加内容脚本？
How to access add-on content script in Firefox console?
我已经为 Firefox 和 Chrome 开发了一个附加组件。它有内容脚本。我想在浏览器选项卡的控制台中访问它们（在 Firefox 上 Web Console）。例如，我想在控制台中输入内容脚本中定义的全局变量，它会输出它的值。
在 Chrome 中，我可以通过按 F12 打开控制台，然后导航到开发人员工具中的“控制台”选项卡。它有一个保管箱，就在过滤器按钮之后，select 我所在的上下文（page/content 脚本）：
在 Firefox 中，如何做同样的事情？
在 Firefox Developer Edition 中，进入 "about:debugging" 页面并单击附加组件旁边的 "Debug" 按钮以打开开发工具。
能够在请求此功能的 Bugzilla 上更改 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. A bug/RFE should be filed 的 context/scope；这将非常有用。您将希望 RFE 清楚地说明应该能够为选项卡中的每个框架（即顶部框架和每个子框架）切换到内容脚本 context/scope。控制台和调试器都应如此。
注意：您可以通过从框架选择器下拉菜单打开的下拉菜单中选择框架，将控制台更改为 iframe 页面脚本的 context/scope：
如果您没有看到此下拉图标，请转到 DevTools 设置并检查 "Select an iframe as the currently targeted document"。但是，这样做 A) 不会切换到内容脚本 context/scope 并且 B) 无法与 Web 调试器一起正常工作（在当前版本的 Firefox 和 Nightly (54.0a1) 中测试。
网络调试器
您可以使用网络调试器（Ctrl-Shift-S，或F12 并选择 Debugger 选项卡）与 WebExtension 内容脚本。扩展的内容脚本在 moz-extension:// URL 下的 "Sources" 中列出。您将需要 identify the UUID that is used for the extension。您可以查看变量的内容、设置断点等。但是，这并不能使您能够显式切换到子框架的上下文。将 debugger; 指令放在子 iframe 中 运行 的 JavaScript 中是无效的。
Web Debugger 调试内容脚本（在顶部框架中）：
后台脚本上下文中的控制台
如果您想打开 WebExtensions 后台脚本上下文中的控制台，您可以通过单击 Debug 按钮来实现 about:debugging。但是，这不会让您访问内容脚本上下文中的控制台。
在 iframe 中查看变量值的解决方法
满足您的需求：明确指示值位于 iframe 上下文中，而不是顶部框架；我看到了两种这样做的方法：
使用 console.log() 并在前面加上清楚表明脚本 相信 它是 iframe 中的 运行 的信息。例如：
console.log('In iframe', 'foo=', foo);
这样您就不必在每次调用 console.log() 时都使用 'In iframe'，您可以创建一个函数，将该文本添加到对该函数的所有调用中。您甚至可以覆盖 console.log() 函数，这样您的代码仍然只调用 console.log().
但是，这只告诉您您的代码认为它在 iframe 中是 运行。您可能正在调试的部分内容是您的内容脚本代码检测它是否在 iframe 中。
此方法不能确定报告的值在 iframe 中实际上。
Store values into DOM using Element.dataset, or other DOM element attributes, and then inspect the DOM for these values. To view these attributes, I find that the DOM Inspector 非常清楚地显示了这些：
该方法可以明确表明values是iframe中的值，具体是哪个iframe，而不需要依赖iframe中的代码运行来准确判断是iframe中的和它在哪个 iframe 中。
一个简单的解决方案是在内容脚本中 console.log() 然后单击 sourcemap link 查看脚本。如下图：
目前还不可能。有一个错误 Implement UI for switching context to content script 打开（自 2017 年 11 月起）。
我已经为 Firefox 和 Chrome 开发了一个附加组件。它有内容脚本。我想在浏览器选项卡的控制台中访问它们（在 Firefox 上 Web Console）。例如，我想在控制台中输入内容脚本中定义的全局变量，它会输出它的值。
在 Chrome 中，我可以通过按 F12 打开控制台，然后导航到开发人员工具中的“控制台”选项卡。它有一个保管箱，就在过滤器按钮之后，select 我所在的上下文（page/content 脚本）：
在 Firefox 中，如何做同样的事情？
在 Firefox Developer Edition 中，进入 "about:debugging" 页面并单击附加组件旁边的 "Debug" 按钮以打开开发工具。
能够在请求此功能的 Bugzilla 上更改 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. A bug/RFE should be filed 的 context/scope；这将非常有用。您将希望 RFE 清楚地说明应该能够为选项卡中的每个框架（即顶部框架和每个子框架）切换到内容脚本 context/scope。控制台和调试器都应如此。
注意：您可以通过从框架选择器下拉菜单打开的下拉菜单中选择框架，将控制台更改为 iframe 页面脚本的 context/scope：
如果您没有看到此下拉图标，请转到 DevTools 设置并检查 "Select an iframe as the currently targeted document"。但是，这样做 A) 不会切换到内容脚本 context/scope 并且 B) 无法与 Web 调试器一起正常工作（在当前版本的 Firefox 和 Nightly (54.0a1) 中测试。
网络调试器
您可以使用网络调试器（Ctrl-Shift-S，或F12 并选择 Debugger 选项卡）与 WebExtension 内容脚本。扩展的内容脚本在 moz-extension:// URL 下的 "Sources" 中列出。您将需要 identify the UUID that is used for the extension。您可以查看变量的内容、设置断点等。但是，这并不能使您能够显式切换到子框架的上下文。将 debugger; 指令放在子 iframe 中 运行 的 JavaScript 中是无效的。
Web Debugger 调试内容脚本（在顶部框架中）：
后台脚本上下文中的控制台
如果您想打开 WebExtensions 后台脚本上下文中的控制台，您可以通过单击 Debug 按钮来实现 about:debugging。但是，这不会让您访问内容脚本上下文中的控制台。
在 iframe 中查看变量值的解决方法
满足您的需求：明确指示值位于 iframe 上下文中，而不是顶部框架；我看到了两种这样做的方法：
使用
console.log()并在前面加上清楚表明脚本 相信 它是 iframe 中的 运行 的信息。例如：console.log('In iframe', 'foo=', foo);这样您就不必在每次调用
console.log()时都使用'In iframe'，您可以创建一个函数，将该文本添加到对该函数的所有调用中。您甚至可以覆盖console.log()函数，这样您的代码仍然只调用console.log().但是，这只告诉您您的代码认为它在 iframe 中是 运行。您可能正在调试的部分内容是您的内容脚本代码检测它是否在 iframe 中。
此方法不能确定报告的值在 iframe 中实际上。
Store values into DOM using Element.dataset, or other DOM element attributes, and then inspect the DOM for these values. To view these attributes, I find that the DOM Inspector 非常清楚地显示了这些：
该方法可以明确表明values是iframe中的值，具体是哪个iframe，而不需要依赖iframe中的代码运行来准确判断是iframe中的和它在哪个 iframe 中。
一个简单的解决方案是在内容脚本中 console.log() 然后单击 sourcemap link 查看脚本。如下图：
目前还不可能。有一个错误 Implement UI for switching context to content script 打开（自 2017 年 11 月起）。