如何打开正确的 devtools 控制台以查看扩展脚本的输出? [英] How to open the correct devtools console to see output from an extension script?

问题描述

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

manifest.json:

<代码>{"description": "演示 webRequests",清单版本":2，"name": "webRequest-demo","版本": "1.0",权限":[网络请求"],背景": {脚本":[background.js"]}}

background.js:

function logURL(requestDetails) {console.log("加载中:" + requestDetails.url);}chrome.webRequest.onBeforeRequest.addListener(登录网址，{网址:[<all_urls>"]});console.log("Hell o 扩展后台脚本执行");

我错过了什么吗?

解决方案

你的代码是正确的，它可以工作并输出到控制台.
如果您没有看到它，那么您很可能看错了控制台.

1.火狐

Mozilla 在他们的

内容脚本

输出将显示在常规网络控制台中(在网络开发者工具中).您可以通过在注入您的内容脚本的网页中按 F12(或其他快捷方式)打开它.每个 Web 控制台只会显示在该选项卡中注入的脚本的输出.

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

如果要在注入网页的内容脚本的上下文中使用控制台 JavaScript 命令行，则需要从控制台左上角的下拉菜单中选择扩展程序的内容脚本上下文窗户.该下拉菜单通常以值top"开始.下拉菜单将为每个内容脚本上下文(每个注入了脚本的扩展程序一个)提供选择.

弹出窗口(内置)

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

选项

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

带有扩展程序页面的选项卡或弹出窗口(分离)

当聚焦选项卡或分离的弹出窗口时，可以通过按 F12 (或其他快捷方式)来打开DevTools，或通过打开上下文菜单(右键单击)并选择.检查".

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

I am trying to test sample code for web extension for browsers. But, it doesn't work. I checked the console for Google Chrome and also for Firefox. It doesn't print anything. The following is my code:

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

Am I missing something?

解决方案

Your code is correct as written, it works and outputs to console.
If you are not seeing it, then you are, probably, looking at the wrong console.

1. Firefox

Mozilla describes what extension output can be seen in which console in their Debugging article.

• Browser Console

  The Browser Console no longer shows output from WebExtensions background pages by default. You can have it show output from all WebExtensions by selecting to display "Show Content Messages", which is available from the popup that opens when you click on the gear-like symbol "⚙️" in the upper right of the window, just to the right of "Requests". Depending on what you are doing, the Browser Console may show output from a WebExtensions Experiment. You can access the Browser Console from Tools➜Web Developer➜Browser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).

  In older versions of Firefox, this was the console to use to see output from extensions. However, that is no longer the case.

• Browser Toolbox

  If you have it enabled, you could also use the Browser Toolbox console. You can access it from Tools➜Web Developer➜Browser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I). If it is not available you can enable it through options from the Web Console settings page.

  The console in this toolbox will show output from both scripts running in the background context and from content scripts. However, complex data will not be available (e.g. no Objects).

• Add-on Debugger

  This is what you should be using to view console output from scripts running in the background context of your WebExtension. This includes background scripts, scripts running in popups, options pages, and any other page loaded from the extension as the main URL for a tab, or iframe. You can access the Add-on Debugger though about:debugging➞Inspect (use the "Inspect" button that's associated with the WebExtension you are debugging; there's a separate button for each extension). This will open a new tab with the debugger. You can then click on the Console tab within that browser tab. This console will display only content from the WebExtension which you are inspecting.

• Web Console

  You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on's background scripts. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).

2. Google Chrome

Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).

• Background Scripts

  As explained here, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.

  It is much easier to show what you have to do:
  

• Content Scripts

  Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.

  Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.

  If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).

• Popup (built-in)

  Right-click on your browserAction button and select "Inspect Popup". Alternatively, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.

• Options

  Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.

• Tab or popup (detached) with a page from your extension

  When a tab or a detached popup window is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".

  Note, the "detached popup" here means a window without an address bar, which is created using window.open or chrome.windows.create. There was another type called "panels", but it's no longer supported in modern Chrome.

这篇关于如何打开正确的 devtools 控制台以查看扩展脚本的输出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！