By grasaved


2012-04-21 07:59:40 8 Comments

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?

4 comments

@Rob W 2012-04-21 10:12:34

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:

enter image description here enter image description here

Old UI:

image

@grasaved 2012-04-21 16:52:42

Thank you! This solved my problem.

@gwg 2014-10-22 22:45:43

@RobW, I don't have the triangular button to expand the extension and don't see any active views. Is this answer no longer the solution for the latest Chrome build or am I missing something?

@Rob W 2014-10-23 09:28:21

@ggundersen I've updated the picture. The triangle has been removed, that step now automatically happens when Developer mode is activated.

@SuperUberDuper 2017-07-05 16:26:04

how do you debug content scripts then?

@Rob W 2017-07-05 22:27:39

@SuperUberDuper Via the devtools in the tab where the content script is running.

@Michiel 2017-08-10 09:54:10

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

screenshot of setting in console tab in chrome dev tools

@diEcho 2014-10-14 11:03:26

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.

@Xan 2014-10-22 23:16:15

1) This does not answer the question, 2) This is simply wrong; content script logs messages into the console of the page it's injected to, i.e. the actual browser tab. I suppose in your code, popup.js was reused in the popup.html, and as such the output of that copy goes to the place you mentioned. But it's totally misleading.

@RashFlash 2015-03-05 14:29:49

this answer helps me to check log of chrome extension that run as popup

@rogerdpack 2016-10-18 22:37:31

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.

enter image description here

Related Questions

Sponsored Content

1 Answered Questions

Default icon not appearing in chrome extension

6 Answered Questions

0 Answered Questions

Chrome Extension Manifest permissions blocked

2 Answered Questions

[SOLVED] reactjs chrome extension message passing not working

2 Answered Questions

1 Answered Questions

[SOLVED] Background.js not working Chrome Extension

14 Answered Questions

[SOLVED] How do I print debug messages in the Google Chrome JavaScript Console?

1 Answered Questions

Sponsored Content