google-chrome-extension - 如何打开正确的 devtools 控制台以查看扩展脚本的输出？

Question

我正在尝试测试浏览器 Web 扩展的示例代码。
但是，它不起作用。我检查了 Google Chrome 和 Firefox 的控制台。它不打印任何东西。以下是我的代码:

list .json:

{
    "description": "Demonstrating webRequests",
    "manifest_version": 2,
    "name": "webRequest-demo",
    "version": "1.0",

    "permissions": [
        "webRequest"
    ],
    "background": {
        "scripts": ["background.js"]
    }
}

背景.js:

function logURL(requestDetails) {
    console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
    logURL,
    {urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");

我错过了什么吗？

Answer 1

您的代码是正确的，它可以工作并输出到控制台。
如果您没有看到它，那么您很可能是 查看错误的控制台 .
1. 火狐
Mozilla 在其 Debugging 中描述了在哪个控制台中可以看到哪些扩展输出。文章。

Browser Console
Browser Console默认情况下不再显示来自 WebExtensions 后台页面的输出。您可以通过选择显示“显示内容消息”来显示所有 WebExtensions 的输出，当您单击窗口右上角的齿轮状符号“⚙️”时，可以从打开的弹出窗口中找到它，就在“请求”的权利。根据您的操作，浏览器控制台可能会显示 WebExtensions Experiment 的输出.您可以从工具➜Web 开发人员➜浏览器控制台(键盘快捷键 Ctrl-Shift-J，或 Mac 上的 Cmd-Shift-J)访问浏览器控制台。
在旧版本的 Firefox 中，这是用于查看扩展输出的控制台。然而，情况已不再如此。

Browser Toolbox
如果您启用了它，您还可以使用 Browser Toolbox安慰。您可以从 Tools➜Web Developer➜Browser Toolbox 访问它(键盘快捷键 Ctrl-Alt-Shift-I；在 Mac 上:Cmd-Alt-Shift-I)。如果它不可用，您可以通过 Web 控制台设置页面中的选项启用它。
此工具箱中的控制台将显示在后台上下文中运行的脚本和内容脚本的输出。但是，复杂数据将不可用(例如，没有对象)。

Add-on Debugger
这是您应该用来查看在 WebExtension 的后台上下文中运行的脚本的控制台输出的内容。这包括后台脚本、在弹出窗口中运行的脚本、选项页面以及从扩展程序加载的任何其他页面，作为选项卡或 iframe 的主 URL。您可以通过 about:debugging 访问附加调试器➞Inspect(使用与您正在调试的 WebExtension 相关联的“Inspect”按钮；每个扩展都有一个单独的按钮)。这将打开一个带有调试器的新选项卡。然后，您可以单击该浏览器选项卡中的控制台选项卡。此控制台将仅显示您正在检查的 WebExtension 中的内容。

Web Console
您可能正在查看 Web Console (键盘快捷键 F12)仅与单个选项卡相关联。这是调试网页时您想要的，而不是附加组件的后台脚本。对于在该选项卡中注入(inject)的内容脚本，console.log()输出将显示在此控制台中。但是，您将看不到附加组件任何其他部分的输出(例如，其他选项卡中的内容脚本、后台脚本等除外)。

2. 谷歌浏览器
在 Chrome 中为您的扩展程序显示正确的控制台有点复杂。控制台输出将仅显示在多个可能的位置之一，具体取决于 console.log() 的上下文。被处决。以下每个 DevTools 都是相互独立的，并显示在单独的窗口或选项卡中。显示在关联选项卡(底部或侧面)中是与网页和内容脚本关联的 DevTools 的默认设置，因为这些是特定于选项卡的。对于网页/内容脚本 DevTools，您可以选择将其显示在单独的窗口中，或停靠在选项卡内(侧面或底部)。

后台脚本
如 explained here ，您必须在下拉菜单中进行多项选择，才能进入 chrome://extensions页面(或者您可以手动输入该 URL 作为 URL，或使用书签)然后选中两个复选框(“开发人员模式”)，然后单击“背景页面”链接。然后，您必须在弹出的窗口中选择“控制台”选项卡。
展示你必须做的事情要容易得多:

内容脚本
输出将显示在常规 Web 控制台中(在 Web Developer Tools 中)。您可以通过在注入(inject)您的内容脚本的网页中按 F12(或其他快捷方式)来打开它。每个 Web 控制台将仅显示该选项卡中注入(inject)的脚本的输出。
执行上述操作显示 console.*扩展程序的输出，但会导致控制台 JavaScript 命令行、调试器等位于页面上下文中，而不是内容脚本中。
如果要在注入(inject)网页的内容脚本的上下文中使用控制台 JavaScript 命令行，则需要从控制台窗口左上角的下拉菜单中选择扩展的内容脚本上下文。此下拉菜单通常以值“top”开头。下拉列表将为每个内容脚本上下文(每个已注入(inject)脚本的扩展程序一个)提供选择。

弹出窗口(内置)
右键单击您的 browserAction按钮并选择“检查弹出窗口”。或者，在弹出窗口中右键单击并选择“检查”。两者都将打开弹出页面的 DevTools。弹出窗口将在比平时更多的条件下保持打开状态，但如果您切换选项卡等，它仍将关闭。

选项
右键单击“选项”弹出窗口(不是标题栏)的主要内容，然后选择“检查”。这将打开选项页面的 DevTools。

带有扩展程序页面的选项卡或弹出窗口(分离)
当标签或分离的弹出窗口聚焦时，可以通过按F12(或其他快捷方式)来打开DevTools，或通过打开上下文菜单(右键单击)并选择“检查”。
注意，这里的“分离弹出”是指没有地址栏的窗口，它是使用 window.open 创建的。或 chrome.windows.create .还有另一种称为“面板”的类型，但现代 Chrome 不再支持它。