debugginggoogle-chrome-extensionconsolegoogle-chrome-devtools

Accessing console and devtools of extension's `background` script


I just started out with Google Chrome extensions and I can't seem to log to console from my background js. When an error occurs (because of a syntax error, for example), I can't find any error messages either.

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 comes up but I don't see anything being logged to console. What am I doing wrong?


Solution

  • You're looking at the wrong place. These console messages do not appear in the web page, but in the invisible background page (ManifestV2) or service worker (ManifestV3).

    To view the correct console open devtools for the background script's context:

    1. Visit chrome://extensions/ or right-click the extension icon and select "Manage extensions".
    2. Enable developer mode
    3. Click on the link named service worker (ManifestV3) or background page (ManifestV2).

    Screenshot for ManifestV3 extensions:

    enter image description here

    Screenshot for ManifestV2 extensions:

    enter image description here

    enter image description here