debugging log - Where to read console messages from background.js in a Chrome extension?




javascript development (5)

additionally

if you want to see content_script js file ( when "background" property is not set ) in manifest.json

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

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

then right click on extension icon and click on Inspect popup and developer window opens with popup.html opened , there you see console tab.

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?


For followers who wish to see the debug console for a "content script" of their chrome extension, it is available by doing a normal "show developer console" then use the dropdown arrow to selects its "javascript environment" then you'll have access to its methods, etc.


I had the same problem, in my case the logging was set to "Hide all" in the console tab in Chrome Developer tools. I had not even realised this was an option, and I can't remember turning it off


You're looking at the wrong place. Logged console messages do not appear in the web page, but in the (invisible) background page. To see these messages in the console, follow these steps:

Visit chrome://extensions/.
You can also right-click the extension icon, then click "Manage extensions".

  1. Enable developer mode
  2. Click on the link of your background page (at "Inspect views").
  3. The developer console opens for this page.

New UI:

Old UI:






debugging google-chrome-extension console google-chrome-devtools