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

Posted 2023-03-07

【中文标题】如何打开正确的 devtools 控制台以查看扩展脚本的输出？

【英文标题】：How to open the correct devtools console to see output from an extension script?

【发布时间】：2016-12-19 05:19:43

【问题描述】：

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

manifest.json：

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

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

background.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");

我错过了什么吗？

【问题讨论】：

How to use console.log() to debug a Chrome extension?的可能重复

从技术上讲，Where to read console messages from background.js in a Chrome extension? 的副本实际上具有一些独立价值，因为它要求提供特定于 Firefox 的信息并有相应的答案。所以，不要摇摆锤子。

【参考方案1】：

您的代码在编写时是正确的，它可以工作并输出到控制台。 如果您没有看到它，那么您可能是查看了错误的控制台。

1。火狐

Mozilla 在其Debugging 文章中描述了可以在哪个控制台中看到哪些扩展输出。

Browser Console

Browser Console 不再显示来自 WebExtensions 背景页面的输出默认情况下。您可以通过选择显示“显示内容消息”来让它显示 all WebExtensions 的输出，当您单击右上角的齿轮状符号“⚙️”时，可以从打开的弹出窗口中找到它窗口，就在“请求”的右侧。根据您的操作，浏览器控制台可能会显示来自WebExtensions Experiment 的输出。您可以从工具➜Web Developer➜浏览器控制台访问浏览器控制台（键盘快捷键Ctrl-Shift-J，或Cmd-Shift-J 在 Mac 上）。

在旧版本的 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）。这是您在调试网页时想要的，而不是附加组件的后台脚本。对于在该选项卡中注入的内容脚本，console.log() 输出将显示在此控制台中。但是，您不会看到附加组件的任何其他部分的输出（例如，不是其他选项卡中的内容脚本，也不是后台脚本等）。

2。谷歌浏览器

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

后台脚本

作为explained here，您必须在下拉菜单中进行多项选择，才能到达chrome://extensions 页面（或者您可以手动输入该 URL 作为 URL，或使用书签）然后选择两个复选框（“开发者模式”），然后单击“背景页面”链接。然后，您必须在弹出的窗口中选择“控制台”选项卡。

显示你必须做的事情要容易得多：

内容脚本

输出将显示在常规 Web 控制台中（在 Web Developer Tools 中）。您可以通过在注入内容脚本的网页中按 F12 （或其他快捷方式）打开它。每个 Web 控制台将仅显示该选项卡中注入的脚本的输出。

执行上述操作会显示您的扩展程序的 console.* 输出，但会导致控制台 javascript 命令行、调试器等位于页面上下文中，而不是内容脚本中。

如果您想在注入网页的内容脚本的上下文中使用控制台 JavaScript 命令行，您需要从控制台左上角的下拉菜单中选择您的扩展程序的内容脚本上下文窗户。此下拉菜单通常以值“top”开始。下拉菜单将为每个内容脚本上下文（每个已注入脚本的扩展一个）提供选择。

弹出窗口（内置）

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

选项

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

Devtools 扩展面板

与上面的Options 相同：右键单击内部 + 检查。 如果您的面板拦截了右键单击或bugged Chrome 97/98，请打开devtools-on-devtools，然后使用元素面板工具栏中的选择器按钮（或按Ctrl-Shift-C 在 PC 上）在原始开发工具窗口中选择您的面板。

标签或弹出窗口（分离）与您的扩展程序中的页面

当一个选项卡或分离的弹出窗口被聚焦时，您可以通过按 F12（或其他快捷方式）打开 DevTools，或者打开上下文菜单（右键单击）并选择“检查”。

注意，这里的“分离弹出窗口”是指没有地址栏的窗口，它是使用window.open 或chrome.windows.create 创建的。还有另一种称为“面板”的类型，但现代 Chrome 不再支持它。

【参考方案2】：

您在哪个控制台查看日志？

如果您在选项卡上查看控制台，那是错误的地方。

打开设置/扩展或在新标签类型中

chrome://extensions

在您的扩展程序下点击“背景页面”链接，您可以在其中查看日志

**确保选中开发者模式

【参考方案3】：

是的，对于 Chrome，您必须单击提到的背景页面链接，但除非您将其设置为持久性，否则它不会出现：

"background": 
    "persistent": true,
    "scripts": ["background.js"]

【讨论】：

这不一定准确。至少使用与问题中完全相同的代码，当使用“加载未打包的扩展...”加载时，设置"persistent": true 不需要显示“背景页面”链接。

"persistent": true 不需要显示背景页面链接。 "scripts": ["background.js"] 就够了。