Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessing console and devtools of extension's background.js

People also ask

How do you debug a background script?

The background script is like any other JavaScript code. You can debug it using same tools you debug other JavaScript code in Chrome. Now you can debug any extension that have a background page or script. Just scroll to the extension you want to debug and click on the background page link to inspect it.

Where do Chrome extension console logs go?

Logs for extension pages displayed as a tab, such as override pages and full-page options, can be found in the web page console and on the extensions management page.


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 background page (ManifestV2) or service worker (ManifestV3).

Screenshot for ManifestV2 extensions:

enter image description here

enter image description here

Screenshot for ManifestV3 extensions:

enter image description here


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


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


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.