Can't get Firefox extension logs to show up

Question

Following these instructions, I went to about:debugging -> This Firefox and clicked Inspect on my extension, which shows a console. But no logs show up there when I trigger my extension. Using the list-cookies example, I added the last two lines:

gettingAllCookies.then((cookies) => {

    //set the header of the panel
    var activeTabUrl = document.getElementById('header-title');
    var text = document.createTextNode("Cookies at: "+tab.title);
    var cookieList = document.getElementById('cookie-list');

    console.log('I can't see this log!');
    cookieList.parentNode.appendChild(document.createTextNode(Date()));

When I invoke the popup, I see the current date/time in the popup, but no log shows up in the console.

I tried setting extensions.sdk.console.logLevel and restarting as mentioned here (even though I think that's for older versions), but it didn't help.

I thought maybe there's a console permission or something I might need to add to the manifest, but didn't find any such thing.

Complete code for reference. I only changed the lines marked with +/-:

function showCookiesForTab(tabs) {
  //get the first tab object in the array
  let tab = tabs.pop();

  //get all cookies in the domain
  var gettingAllCookies = browser.cookies.getAll({url: tab.url});
  gettingAllCookies.then((cookies) => {

    //set the header of the panel
    var activeTabUrl = document.getElementById('header-title');
    var text = document.createTextNode("Cookies at: "+tab.title);
    var cookieList = document.getElementById('cookie-list');
-   activeTabUrl.appendChild(text);
+
+   console.log('I can't see this log!');
+   cookieList.parentNode.appendChild(document.createTextNode(Date())); // I see this updated even though I don't see the log


    if (cookies.length > 0) {
      //add an <li> item with the name and value of the cookie to the list
      for (let cookie of cookies) {
        let li = document.createElement("li");
        let content = document.createTextNode(cookie.name + ": "+ cookie.value);
        li.appendChild(content);
        cookieList.appendChild(li);
      }
    } else {
      let p = document.createElement("p");
      let content = document.createTextNode("No cookies in this tab.");
      let parent = cookieList.parentNode;

      p.appendChild(content);
      parent.appendChild(p);
    }
  });
}

//get active tab to run an callback function.
//it sends to our callback an array of tab objects
function getActiveTab() {
  return browser.tabs.query({currentWindow: true, active: true});
}
getActiveTab().then(showCookiesForTab);

Answer 1

Firefox console has been divided into different areas. The result of console.log() can be viewed in the relative area.

• Multiprocess Browser Console Ctrl+Shift+J
  Mostly logs by Firefox itself
• Web Developer Tools Ctrl+Shift+I or F12
  Logs by Tab/Webpage and Content scripts of addons
• Extension Toolbox about:debugging#/runtime/this-firefox ? XYZaddon ? Inspect
  Logs by background scripts of XYZaddon

Update

Based on comments, here is a tested simplified code that you can work on. The log shows on Extension Toolbox.

async function showCookiesForTab() {
  // get the first tab object in the array
  const tabs = await browser.tabs.query({currentWindow: true, active: true});

  // get all cookies in the domain
  const cookies = await browser.cookies.getAll({url: tabs[0].url});
  console.log(cookies);
  // Array(6) [ {…}, {…}, {…}, {…}, {…}, {…} ]
}

showCookiesForTab();

Answer 2

I had a similar issue. I didn’t figure out the cause, but I find a way to see the console.log in the Extension Toolbox.

I added a background script to handle most of the popup.js logic. And since there is a background script running, I can see the log.

Still don’t why I couldn’t see the log in the first place.