menu

Questions & Answers

How can I debug the background page in a Chrome devtools extension?

I am developing a Chrome DevTools extension, and I can't find how to debug a script running in the background page.

I declared a DevTools background page in manifest.json:

"devtools_page": "devtools-background.html"

That HTML page runs a script:

<script src="devtools-background.js"></script>

The script adds a panel:

chrome.devtools.panels.create('My Extension', '', 'index.html')

I can run my extension by opening DevTools on any page, and that works great, I see the panel. I can debug my panel's Elements and Scripts by opening the DevTools on the DevTools page (or going through chrome://extensions developer mode). I can even connect an external debugger from VS Code to the extension panel.

But I can't connect a debugger to the devtools-background.js from the background page. I can't use console.log or step debugging to understand what's going on in the background. The only thing I have is Errors from the chrome://extensions developer mode if an error occurs in that script. But no console or debugger.

Comments:
2023-01-11 09:15:03
Open devtools for the panel, then go to Sources: puu.sh/IFJAo/dfbedcba5e.png
2023-01-11 09:15:03
Strangely that doesn't work when I start Chrome with --load-extension in the command line.
2023-01-11 09:15:03
Works for me, but there's a bug in stable Chrome so just open devtools-on-devtools manually.
2023-01-11 09:15:03
Thanks, it worked in the end.
Answers(1) :

When you click "service worker", you can find background of console log.

enter image description here