javascriptgoogle-chrome-devtoolschrome-extension-manifest-v3

No output to console with chrome.devtools extension

enter image description here

I'm trying to follow https://betterprogramming.pub/chrome-extension-intercepting-and-reading-the-body-of-http-requests-dd9ebdf2348b to create a devtools panel in order to grab the response of a specific post request on a website. I've started with the instructions in the second part of the article, to create a basic devtools panel (which appears to work). I followed this with a discussion of the devtools.network API at https://developer.chrome.com/docs/extensions/reference/api/devtools/network#type-Request. I've decided to try to get the network requests using the getHAR() function (https://developer.chrome.com/docs/extensions/reference/api/devtools/network#method-getHAR).

Here is the manifest.json:

{
  "manifest_version": 3,
  "name": "Extension",
  "version": "1.0",
  "description": "Description",
  "devtools_page": "devtools.html"
}

devtools.html:

<script src="devtools.js"></script>

devtools.js:

chrome.devtools.panels.create("MyPanel", null, 'panel.html');

panel.html:

<html>
    <body>
        <script src="panel.js"></script>
    </body>
</html>

panel.js:

  chrome.devtools.network.getHAR(
   function (harLog) {

    console.log('my output');
    console.log(harLog);

  }
);

If I go to https://developer.mozilla.org/en-US/docs/Web/API/setTimeout with the devtools window open and reload the page, I see no output from the extension in the console and no errors at chrome://extensions. What am I doing wrong?

Solution

  • I assume you are not looking at the console of the DevTools themselves (which is where you are logging to) but at the console of the main website on which you opened your DevTools. Your code runs inside the DevTools window, not inside the extension background page and neither inside the main website.

    Open DevTools as undocked window1 and then press Ctrl+Shift+I within the DevTools window to open another DevTools window which targets the other DevTools (and not the website).

    1: enter image description here

    If you enter location.href in the new DevTools window, you will see a URL such as devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@31f8248cdd90acbac59f700b603fed0b5967ca50/&can_dock=true&targetType=tab&veLogging=true, indicating that you are now looking at a DevTools window that's debugging another DevTools window, and that's what you need to see your console output that's logged within the first DevTools window's context.

    To summarize, we have:

    1. Website example.com
    2. DevTools A debugging example.com from step 1
    3. DevTools B debugging DevTools A from step 2

    If code within example.com uses console.log, it shows up in DevTools A from step 2. But if code within DevTools A (such as your custom panel) uses console.log, it shows up in DevTools B from step 3.

    (And yes, if you would like to debug issues that your panel has while you are debugging another DevTools window, you could continue your DevTools-ception by opening a new DevTools C window debugging DevTools B which debugs DevTools A which debugs example.com... Have fun.)