javascript - 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": "[email protected]",
            "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).

Answer 1

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.');
}
//*

---

1. 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).
2. 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."