Google Chrome / Firefox在控制台

Question

我正在尝试为浏览器测试Web扩展的示例代码。 但是，它不起作用。我检查了控制台的谷歌浏览器和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");

我错过了什么吗？

Answer 1

火狐

在Firefox中，您的代码可以正常工作（输出到控制台），因为它写在问题中。

如果您没有在控制台中看到它，那么您可能正在查看错误的控制台。

Mozilla描述了在Debugging page中哪个控制台可以看到的扩展输出。

Browser Console

您应该使用Browser Console。您可以从Tools➜WebDeveloper➜BrowserConsole（键盘快捷键 Ctrl - Shift - J 或 Cmd - Shift - Mac上的 J 。

Browser Toolbox

如果启用了它，您还可以使用Browser Toolbox控制台。您可以从Tools➜WebDeveloper➜BrowserToolbox（键盘快捷键 Ctrl - Alt - Shift - I 访问它;在Mac上： Cmd - Alt - Shift - I ）。

Add-on Debugger

要调试加载项，可以使用加载项调试程序。您可以通过about:debugging➞Debug。

访问它

Web Console

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

Google Chrome

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

对于您的背景页面

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

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

对于您的内容脚本

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

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

如果要在注入网页的内容脚本的上下文中使用控制台JavaScript命令行，则需要从控制台左上角的下拉菜单中选择扩展的内容脚本上下文窗口。此下拉菜单通常以值“top”开头。下拉列表将包含每个内容脚本上下文的选择（每个扩展一个注入了脚本）。

对于你的Popup

右键单击browserAction按钮，然后选择“Inspect Popup”。或者，在弹出窗口中单击鼠标右键，然后选择“检查”。要么为弹出页面打开DevTools。弹出窗口将在比平时更多的条件下保持打开状态，但如果切换标签等，仍会关闭。

对于您的选项页面

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

对于您的面板或扩展程序中加载的标签页

当面板或标签聚焦时，您可以通过按 F12 （或其他快捷方式）或打开上下文菜单（右键单击）并选择“检查”来打开DevTools。 / p>

Answer 2

您正在查看哪些控制台的日志？

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

打开设置/扩展程序或在新标签页中输入

chrome://extensions

在您的扩展程序下，点击＆＃34;后台页面＆＃34;链接，你可以在那里看日志

**确保选中开发者模式

Answer 3

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

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