Accessing console and devtools of extension's background.js

Question

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?

possible duplicate of [How to debug Google Chrome background script?](http://stackoverflow.com/questions/10081898/how-to-debug-google-chrome-background-script) — ripper234, Nov 23 '12 at 00:05
Please select messages or info if highlighted bar is on other tabs like No verbose [selected tab matters](https://i.stack.imgur.com/bN5RX.png) — Siluveru Kiran Kumar, Aug 23 '18 at 16:52

score 433 · Accepted Answer · edited May 09 '21 at 16:44

433

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:

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

Screenshot for ManifestV2 extensions:

Screenshot for ManifestV3 extensions:

edited May 09 '21 at 16:44

wOxxOm

65,848
11
132
136

answered Apr 21 '12 at 10:12

Rob W

341,306
83
791
678

@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? – jds Oct 22 '14 at 22:45
1

@ggundersen I've updated the picture. The triangle has been removed, that step now automatically happens when Developer mode is activated. – Rob W Oct 23 '14 at 09:28
how do you debug content scripts then? – SuperUberDuper Jul 05 '17 at 16:26
1

@SuperUberDuper Via the devtools in the tab where the content script is running. – Rob W Jul 05 '17 at 22:27
Nothing appears when I click that. – velkoon Feb 15 '22 at 22:00
1

@velkoon it is really buggy sometimes you have to disable and reenable extension – strix25 Aug 25 '22 at 06:46
If you don't see `Inspect view`, load the extension again – onmyway133 Aug 27 '23 at 12:40

score 16 · Answer 2 · answered Aug 10 '17 at 09:54

16

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

answered Aug 10 '17 at 09:54

Michiel

4,160
3
30
42

score 9 · Answer 3 · answered Oct 18 '16 at 22:37

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.

score 7 · Answer 4 · edited May 31 '17 at 01:45

7

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.

edited May 31 '17 at 01:45

Jay Taylor

13,185
11
60
85

answered Oct 14 '14 at 11:03

xkeshav

53,360
44
177
245

9

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. – Xan Oct 22 '14 at 23:16
3

this answer helps me to check log of chrome extension that run as popup – RashFlash Mar 05 '15 at 14:29

score 5 · Answer 5 · answered Jun 10 '19 at 22:44

5

Similar to the answer of Michiel i also had a funny console configuration: A filter i dont remember setting:

After clearing the filter i saw the messages.

answered Jun 10 '19 at 22:44

Tonio Liebrand

17,189
4
39
59

score 1 · Answer 6 · answered Jan 10 '20 at 02:33

If we want to read messages printed to console from the popup page, we can click the extension icon to open the popup page, then do right click on the popup page anywhere, a dropdown menu will display, we just click "Inspect" menu to open the developer tool. Notice that the popup page must be keep opening. If it is closed(by window.close()), the developer tool will be closed too.

score 1 · Answer 7 · edited Sep 23 '21 at 19:48

1

The other answer(s) work(s) for background.js but, if you are looking for console.logs from the popup then you can try:

var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');

I was developing using cra, and this worked for me.

edited Sep 23 '21 at 19:48

Adrian Mole

49,934
160
51
83

answered Sep 23 '21 at 18:25

Abhishek

13
3

score 0 · Answer 8 · answered Jun 27 '19 at 12:42

0

I had this problem as well. It seems as though my webpage was not updating to the newly saved script. This was solved by pressing Ctrl + refresh (or Ctrl + F5) in the chrome browser.

answered Jun 27 '19 at 12:42

score 0 · Answer 9 · answered Sep 29 '22 at 04:16

For those developing extensions for Firefox:

TL;DR version: you need to use Ctrl+Shift+J to call up the browser console window, and click on the settings icon on the top right-hand corner and make sure that "Show Content Messages" is checked.

Longer explanation from a related stackoverflow question: How do I see the console.log output of a background script in a Firefox WebExtension?

Accessing console and devtools of extension's background.js

9 Answers9

Linked

Related