Chrome Extension debugging devtools.js no console.log

Question

not sure if this is a bug or not, but when when I create a devtools extension, the JS file referenced in the "devtools_page" html file ((i.e. where I'm adding the devtools panel), it doesn't seem to ever output logging output. I can see it in background.js and in content.js, but not in devtools.js. Note that this IS logged in Firefox. I am seeing the message being passed, so the listener is firing at least. Any thoughts?

// devtools.js
console.log('devtools');

const b = chrome || browser;

b.devtools.panels
.create("Example", "/icons/star.png", "/panel/panel.html", function (newPanel) {
    newPanel.onShown.addListener(function() {
      b.tabs.query({active: true, currentWindow: true}, function (tabs) {
        b.tabs.sendMessage(
          tabs[0].id,
          {greeting: "hello"},
          function (response) {
            console.log("I AM THE RESPONSE");
          }
        );
      });
    });
  });

// content.js
console.log('content');
const b = chrome || browser;

b.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(
    sender.tab
      ? "from a content script:" + sender.tab.url
      : "from the extension"
  );
  if (request.greeting == "hello") sendResponse({farewell: "goodbye"});
});

// background.js
console.log('background');

{
  "description": "__MSG_description__",
  "manifest_version": 2,
  "default_locale": "en",
  "name": "Example",
  "version": "1.0",
  "author": "author",
  "homepage_url": "",
  "icons": {
    "48": "icons/star.png"
  },

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

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]}
  ],

  "permissions": [
    "<all_urls>"
  ],

  "devtools_page": "index.html"
}