How do I see the console.log output of a background script in a Firefox WebExtension?

Question

Does anyone know how to see the output from a console.log() call in a background script? I can see the output from the same in a content script. Here is a simple script that I am testing this with:

Here is my background.js:

console.log("Message from background.js");

Here is my manifest.json:

{
    "name": "TestBed",
    "manifest_version": 2,
    "version": "1.0",

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

    "browser_action": {
        "default_title": "Click"
    },

    "applications": {
        "gecko": {
            "id": "testbed@example.com",
            "strict_min_version": "48.0a1"
        }
    }
}

I've also tried this in the background script:

chrome.browserAction.onClicked.addListener(function() {
    console.log('Message from background.js onclicked handler');
});

I have even uninstalled Firebug as some other posts have suggested, but that made no difference either (note that the console.log in content scripts works).

score 36 · Accepted Answer · edited Jun 20 '20 at 09:12

For a more general answer about seeing extension output in the console, please see my answer to: Google Chrome / Firefox do not see extension output in console.

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.

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".

You can see the output of console.log() from you background scripts in the Browser Console. You can open the Browser Console by either using the keyboard shortcut, Ctrl-Shift-J, or Cmd-Shift-J on OSX, or from the Firefox menu bar: Tools➞Web Developer➞Browser Console.

When testing WebExtensions in versions greater than or equal to 49,¹ I routinely abuse a misfeature to cause the extension to open the Browser Console. The alert() function is not supported in background scripts, but will open the Browser Console and output the alert text in the console.² Doing so will work in Firefox versions greater than or equal to 49.0. However, it throws an error in earlier versions of Firefox.

For testing, I often include in my background scripts something like:

//* For testing, open the Browser Console
try {
    //alert() is not actually supported in Firefox WebExtension background scripts.
    //This forces the Browser Console open.
    //This abuse of a misfeature works in FF49.0b+, not in FF48.
    alert('Open the Browser Console.');
} catch(e) {
    //alert() throws an error in Firefox versions below 49.
    console.log('alert() threw an error. Probably Firefox version < 49.');
}
//*

For a while in Firefox 52.0a2 (Developer Edition) and 53.0a1 (Nightly), it would instead throw a cryptic error. In the most recent builds of these versions, this has been returned to the functionality seen in Firefox 49: opening the Browser Console and displaying passed text and the message in 2 (below).
In addition to the text passed to alert(), it will also output on a separate line: "alert() is not supported in background windows; please use console.log instead."

So how do you call "Alert" when you click on a button (not popup menu)? — ilw, Apr 23 '17 at 16:54
@Andreyua, From a background script? You don't. You can open a window with HTML of your own such that it looks much like an alert. You can make it effectively modal (i.e. that the user must interact with it prior to doing anything else), but you can't have something that is actually blocking JavaScript execution. — Makyen, Apr 23 '17 at 19:41
Not care : background script or not, just how call normal alert by pressing on WebExtension button? Really not impossible? — ilw, Apr 24 '17 at 10:56
That `alert()` trick to self-open the browser console is absolutely brilliant. Too often I wonder why I'm not seeing anything in the console only to remember that it's the wrong console! I'm going to be using that a lot! — Stack of Pancakes, Mar 15 '18 at 17:59
I happened to have opened the right console because I always check there if there are any errors after reloading my JavaScript changes. But for `console.log` I still have to check "**Show Content Messages**" (firefox version 70). — CarpeDiemKopi, Oct 11 '19 at 09:18
It seems like the "Show Content Messages" button has been removed. — Rein F, Feb 08 '23 at 13:25

How do I see the console.log output of a background script in a Firefox WebExtension?

1 Answers1

Add-on Debugger

Browser Console

Linked