Access the extended background.js console and development tools

Question

I just started using the Google Chrome extension and I can't seem to log into the console from the background js. I also can't find any error message when an error occurs (e.g. due to a syntax error).

My manifest file:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js:

alert("here");
console.log("Hello, world!")

When I load the extension, the alert appears, but I don't see anything logged to the console. What did i do wrong?

Answer 1

I had the same issue, in my case the logging in the console tab of Chrome Developer Tools was set to "Hide All". I didn't even realize this was an option and I don't remember turning it off

Answer 2

You are looking at the wrong place. These console messages do not appear in the web page, but appear in an invisible background page (ManifestV2) or Service Worker (ManifestV3).

To see the correct console for background script context open the development tools:

1. Visit chrome://extensions/ or right-click the extension icon and select "Manage Extensions."
2. Enable developer mode
3. Click the link named Background Page (ManifestV2) or Service Worker (ManifestV3).

Screenshot of ManifestV2 extension:

Screenshot of ManifestV3 extension: